/* =========================================================================
   Dopamine Design System — Foundation tokens
   Dark-mode first; *-inverted variants are the light-mode counterparts.
   Source: Design System for Claude.fig (Colors + Addons-Colors + Typography).
   ========================================================================= */

/* ---------- Font imports (MUST come first per CSS spec) ------------------ */

/* Inter — open metric-match fallback for the SF Pro weights we don't have
   (Text Medium 500, Text Semibold 600, Text Bold 700, Display Semibold 600). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Material Symbols Rounded — the only icon set in the system.
   Axis pin: weight 600, fill 1, grade 0 (normal), optical size 24dp. */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,600,1,0&display=block');

/* ---------- @font-face: provided SF Pro weights -------------------------- */

/* SF Pro is Apple-proprietary. The user has provided two of the six weights
   used in the Figma — SF Pro Text Regular and SF Pro Display Bold. The
   remaining four weights (Text Semibold/Medium/Bold, Display Semibold) fall
   back to Inter, which has near-identical metrics. */
@font-face {
  font-family: 'SF Pro Text';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/SFProText-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'SF Pro Display';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/SFProDisplay-Bold.otf') format('opentype');
}

:root {
  /* ===== Color: Backgrounds (dark mode default) ========================== */
  --bg-primary:           #121212;
  --bg-secondary:         #202022;
  --bg-tertiary:          #2C2C2E;
  --bg-quaternary:        #3A3A3C;
  --bg-accent:            #EF3124;  /* destructive / error only — NOT a brand color */
  --bg-brand:             #0072EF;  /* the single brand color (alias of --text-link) */
  --bg-info:              #001C3C;
  --bg-positive-muted:    #042117;
  --bg-attention-muted:   #332104;
  --bg-negative-muted:    #35110D;
  --bg-opaque:            rgba(255, 255, 255, 0.80); /* floating glass */
  --bg-overlay:           rgba(0,   0,   0,   0.80); /* modal scrim    */

  /* Inverted backgrounds = light surfaces on dark canvas (and vice versa) */
  --bg-primary-inverted:    #FFFFFF;
  --bg-secondary-inverted:  #F3F4F5;
  --bg-tertiary-inverted:   #E9E9EB;
  --bg-quaternary-inverted: #DCDCDD;

  /* ===== Color: Text ===================================================== */
  --text-primary:          #FFFFFF;
  --text-secondary:        rgba(235, 235, 245, 0.54);
  --text-tertiary:         rgba(235, 235, 245, 0.32);
  --text-disabled:         rgba(235, 235, 245, 0.20);
  --text-accent:           #EF3124;
  --text-link:             #0072EF;
  --text-positive:         #13A463;
  --text-attention:        #CB830F;
  --text-negative:         #F15045;

  --text-primary-inverted:   #0F0F0F;
  --text-secondary-inverted: rgba(60, 60, 67, 0.66);
  --text-tertiary-inverted:  rgba(60, 60, 67, 0.40);
  --text-disabled-inverted:  rgba(60, 60, 67, 0.22);

  /* ===== Color: Borders ================================================== */
  --border-primary:    #2B2B2E;
  --border-secondary:  #262629;
  --border-tertiary:   #1C1C1E;
  --border-underline:  #464649;
  --border-key:        #FFFFFF;
  --border-accent:     #EF3124;
  --border-link:       #0072EF;

  --border-primary-inverted:   #DCDCDD;
  --border-secondary-inverted: #E9E9EB;
  --border-tertiary-inverted:  #F3F4F5;
  --border-underline-inverted: #C5C5C7;
  --border-key-inverted:       #000000;

  /* ===== Color: Graphics (icon fills, illustration strokes) ============== */
  --graphic-primary:    #FFFFFF;
  --graphic-secondary:  #85858D;
  --graphic-tertiary:   #4F4F52;
  --graphic-quaternary: #303032;
  --graphic-accent:     #EF3124;
  --graphic-link:       #0072EF;
  --graphic-positive:   #2FC26E;
  --graphic-attention:  #F6BF65;
  --graphic-negative:   #D91D0B;

  --graphic-primary-inverted:    #0F0F0F;
  --graphic-secondary-inverted:  #86868A;
  --graphic-tertiary-inverted:   #C1C1C3;
  --graphic-quaternary-inverted: #DCDCDD;

  /* ===== Color: Static / Statuses ======================================== */
  /* Pure swatches that don't shift with mode — for badges, tags, charts.   */
  --status-grey:   #6D7986; /* neutral, unavailable, default, low          */
  --status-green:  #13A463; /* confirm, success, available, complete       */
  --status-orange: #DE6B00; /* caution, warning, moved, high               */
  --status-red:    #D91D0B; /* remove, error, busy, urgent                 */
  --status-blue:   #007AFF; /* action, progress, new, help, info           */
  --status-teal:   #219187;
  --status-purple: #6929C4;

  /* ===== Color: Graphics palette (illustration tints) ==================== */
  /* Used for cards, tag chips, illustration fills — soft, warm-cool range  */
  --pal-sand:           #F6F6F6;
  --pal-blue-moody:     #7A70CF;
  --pal-blue-maya:      #6DBEEF;
  --pal-green-jungle:   #25C265;
  --pal-persimmon:      #FF6C5C;
  --pal-lavender:       #B8B0DC;
  --pal-amethyst:       #948FD4;
  --pal-tonzaili:       #E2EBEB;
  --pal-coldsale:       #DBCEFC;
  --pal-gallery:        #EEEEEE;
  --pal-soft-peach:     #FAEDDB;
  --pal-saltmie:        #F0E6A1;
  --pal-strawberry:     #FF8C97;
  --pal-raspberry:      #F8528B;
  --pal-blackberry:     #5B4178;
  --pal-peach:          #F6C99B;
  --pal-chick:          #F9D85F;
  --pal-carrot:         #F4A23D;
  --pal-sky:            #B5D1E4;
  --pal-venusiar:       #8AB6B6;
  --pal-olive:          #B4B05C;
  --pal-blue-steel:     #4F84B5;
  --pal-jello:          #F2766A;
  --pal-jaffa-light:    #F18536;
  --pal-fuel-yellow:    #ECA82C;
  --pal-canache:        #C58F70;
  --pal-saffron:        #E4D353;
  --pal-turkish-rose:   #B25F76;
  --pal-brink-pink:     #F2589F;
  --pal-valencia:       #D9504C;
  --pal-milano-red:     #B22322;
  --pal-red-damask:     #D87B59;
  --pal-burnt-burma:    #B45A4D;
  --pal-sandy-brown:    #F8C088;
  --pal-olivine:        #94B569;
  --pal-mantis:         #80C158;
  --pal-java:           #28B5A0;
  --pal-turquoise-blue: #5BD4EF;
  --pal-chathams-blue:  #1A5C77;
  --pal-jungle-green:   #2F8F70;
  --pal-blue-chill:     #1F94A6;
  --pal-hippie-blue:    #6FA9B7;
  --pal-eastern-blue:   #1B8DAE;
  --pal-curious-blue-l: #4DB1E0;
  --pal-curious-blue:   #2A8FCE;
  --pal-fun-blue:       #1F6BB0;
  --pal-saltcorn:       #B8A47A;
  --pal-walhalla-grey:  #6C7986;
  --pal-cholla:         #A38F5F;
  --pal-pewter:         #9DA09D;
  --pal-boulder:        #7C7C7C;
  --pal-nevada:         #5F676F;
  --pal-pickled-wood:   #1D4356;
  --pal-mirage:         #182233;
  --pal-french-lilac:   #DAC8DC;
  --pal-deep-green:     #2A4738;
  --pal-neon-rose:      #F8B8C2;
  --pal-sarah:          #E5F0E1;
  --pal-serenade:       #F8E8D8;
  --pal-spinner:        #C9C792;
  --pal-cress:          #6F6F30;

  /* ===== Typography: Family ============================================= */
  --font-sans: "SF Pro Text", -apple-system, BlinkMacSystemFont,
               "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono",
               "Menlo", "Consolas", monospace;

  /* ===== Typography: Headline scale (SF Pro Display, Bold) =============== */
  --type-headline-xlarge:  700 34px/41px var(--font-display);
  --type-headline-large:   700 30px/36px var(--font-display);
  --type-headline-medium:  700 27px/32px var(--font-display);
  --type-headline-small:   700 22px/28px var(--font-display);
  --type-headline-xsmall:  700 17px/24px var(--font-sans);
  --tracking-headline-xl:   0.37px;
  --tracking-headline-l:    0.36px;
  --tracking-headline-m:    0.35px;
  --tracking-headline-s:    0.35px;
  --tracking-headline-xs:  -0.41px;

  /* ===== Typography: Paragraph (Regular) ================================= */
  --type-paragraph-primary-l:    400 19px/24px var(--font-sans);
  --type-paragraph-primary-m:    400 17px/24px var(--font-sans);
  --type-paragraph-primary-s:    400 15px/20px var(--font-sans);
  --type-paragraph-secondary-l:  400 13px/18px var(--font-sans);
  --type-paragraph-secondary-m:  400 12px/16px var(--font-sans);
  --type-paragraph-secondary-s:  400 11px/14px var(--font-sans);
  --type-paragraph-component:    400 17px/22px var(--font-sans);
  --type-paragraph-tagline:      400 13px/18px var(--font-sans);
  --type-paragraph-caps:         500 11px/16px var(--font-sans);

  /* ===== Typography: Action (Semibold) =================================== */
  --type-action-primary-l:    600 19px/24px var(--font-sans);
  --type-action-primary-m:    600 17px/24px var(--font-sans);
  --type-action-primary-s:    600 15px/20px var(--font-sans);
  --type-action-secondary-l:  600 13px/18px var(--font-sans);
  --type-action-secondary-m:  600 12px/16px var(--font-sans);
  --type-action-secondary-s:  600 11px/14px var(--font-sans);
  --type-action-component:    700 17px/22px var(--font-sans); /* button label = Bold */
  --type-action-tagline:      600 13px/18px var(--font-sans);
  --type-action-caps:         600 11px/16px var(--font-sans);

  --tracking-primary-l:   -0.49px;
  --tracking-primary-m:   -0.41px;
  --tracking-primary-s:   -0.24px;
  --tracking-secondary-l: -0.08px;
  --tracking-secondary-m:  0.00px;
  --tracking-secondary-s:  0.07px;
  --tracking-component:   -0.41px;
  --tracking-tagline:     -0.08px;
  --tracking-caps:         1.25px;

  /* ===== Spacing ========================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 36px;
  --space-10: 60px;

  /* ===== Radii =========================================================== */
  --radius-xs:  4px;
  --radius-s:   8px;
  --radius-m:  12px;
  --radius-l:  16px;   /* large buttons */
  --radius-xl: 24px;   /* cards, sheets */
  --radius-full: 9999px;

  /* ===== Elevation (very restrained — kit reads as flat) ================= */
  --shadow-hairline: 0 0 0 1px var(--border-primary);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.15);
  --backdrop-blur: blur(20px) saturate(180%);

  /* ===== Motion ========================================================== */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS sheet present     */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);       /* opacity / scale tap   */
  --dur-fast:    120ms;
  --dur-base:    150ms;
  --dur-slow:    300ms;
}

/* =========================================================================
   Semantic role classes — use these instead of raw vars wherever possible.
   ========================================================================= */

.h1, h1 { font: var(--type-headline-xlarge); letter-spacing: var(--tracking-headline-xl); color: var(--text-primary); margin: 0; }
.h2, h2 { font: var(--type-headline-large);  letter-spacing: var(--tracking-headline-l);  color: var(--text-primary); margin: 0; }
.h3, h3 { font: var(--type-headline-medium); letter-spacing: var(--tracking-headline-m);  color: var(--text-primary); margin: 0; }
.h4, h4 { font: var(--type-headline-small);  letter-spacing: var(--tracking-headline-s);  color: var(--text-primary); margin: 0; }
.h5, h5 { font: var(--type-headline-xsmall); letter-spacing: var(--tracking-headline-xs); color: var(--text-primary); margin: 0; }

.p-lg  { font: var(--type-paragraph-primary-l);   letter-spacing: var(--tracking-primary-l);   color: var(--text-primary);   }
.p     { font: var(--type-paragraph-primary-m);   letter-spacing: var(--tracking-primary-m);   color: var(--text-primary);   }
.p-sm  { font: var(--type-paragraph-primary-s);   letter-spacing: var(--tracking-primary-s);   color: var(--text-primary);   }
.p-2   { font: var(--type-paragraph-secondary-l); letter-spacing: var(--tracking-secondary-l); color: var(--text-secondary); }
.p-2sm { font: var(--type-paragraph-secondary-m); letter-spacing: var(--tracking-secondary-m); color: var(--text-secondary); }
.p-2xs { font: var(--type-paragraph-secondary-s); letter-spacing: var(--tracking-secondary-s); color: var(--text-secondary); }
.caps  { font: var(--type-paragraph-caps);        letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }

.action     { font: var(--type-action-primary-m); letter-spacing: var(--tracking-primary-m); color: var(--text-primary); }
.btn-label  { font: var(--type-action-component); letter-spacing: var(--tracking-component); color: var(--text-primary); }

code, .code { font: 400 13px/18px var(--font-mono); color: var(--text-primary); }

/* Icon font shorthand */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
  font-feature-settings: 'liga';
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
  /* keep the rasterizer happy while the variable axes spin up */
  -webkit-font-feature-settings: 'liga';
  font-weight: normal;
  font-style: normal;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}