/* ============================================================
   OptAI Design System — Colors & Typography
   ============================================================ */

/* ------------------------------------------------------------
   @font-face: Safiro
   ------------------------------------------------------------ */
@font-face {
  font-family: "Safiro";
  src: url("fonts/Safiro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Safiro";
  src: url("fonts/Safiro-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Safiro";
  src: url("fonts/Safiro-Medium-alt.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Safiro";
  src: url("fonts/Safiro-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Safiro";
  src: url("fonts/Safiro-SemiBold-alt.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Safiro";
  src: url("fonts/Safiro-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Safiro";
  src: url("fonts/Safiro-Bold-alt.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Safiro";
  src: url("fonts/Safiro-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

/* ------------------------------------------------------------
   @font-face: SF Pro Display
   ------------------------------------------------------------ */
@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFProDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFProDisplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

/* ------------------------------------------------------------
   @font-face: Minion Pro (editorial / accent serif)
   ------------------------------------------------------------ */
@font-face {
  font-family: "Minion Pro";
  src: url("fonts/MinionPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

/* ------------------------------------------------------------
   Color Tokens
   ------------------------------------------------------------ */
:root {
  /* --- Backgrounds --- */
  --color-bg-primary:          #002E3B;   /* dark teal — main dark background */
  --color-bg-secondary:        #264554;   /* slightly lighter teal — secondary dark surface */
  --color-bg-light:            #F4F3F0;   /* off-white — primary light background */
  --color-bg-light-alt:        #F5F5F5;   /* light grey — secondary light background */
  --color-bg-accent-mint:      #E6F8F1;   /* soft mint — card/banner on light bg */
  --color-bg-accent-sky:       #DFF4FB;   /* soft sky — card/banner on light bg */
  --color-bg-white:            #FFFFFF;
  --color-bg-grey-light:       #F6F6F6;   /* page bg in app */

  /* --- Accents / Brand --- */
  --color-accent-mint:         #46F1D9;   /* cyan-mint — CTA, highlights, active */
  --color-accent-sky:          #04D1FF;   /* bright sky blue — secondary CTA */
  --color-accent-teal:         #009689;   /* mid teal — icons, strokes */
  --color-accent-green-mid:    #3E8471;   /* muted green — secondary accent */
  --color-accent-green:        #00C479;   /* success / positive */
  --color-success:             #008236;   /* deep green — success text */

  /* --- Text --- */
  --color-text-heading-dark:   #002E3B;   /* headings on light bg */
  --color-text-body:           #264554;   /* body copy on light bg */
  --color-text-primary:        #101828;   /* near-black — default body text in app */
  --color-text-secondary:      #2C2C2C;   /* dark grey — labels */
  --color-text-muted:          #4A5565;   /* muted body */
  --color-text-subtle:         #6A7282;   /* subtle / placeholder */
  --color-text-accent-heading: #46F1D9;   /* accent heading on dark bg */
  --color-text-alt-heading:    #04D1FF;   /* alt accent heading on dark bg */
  --color-text-white:          #FFFFFF;

  /* --- Borders / Strokes --- */
  --color-border:              #C8D2D0;   /* default border */
  --color-border-subtle:       #E0DFE5;   /* subtle dividers */

  /* --- Status --- */
  --color-error:               #C10007;     /* fail / error text */
  --color-error-bg:            #FFF0F0;     /* fail / error tint */
  --color-warning:             #D97757;     /* warning accent (orange) */
  --color-warning-text:        #C05621;     /* warning text on light bg */
  --color-warning-bg:          #FEF3EC;     /* warning tint */

  /* --- Score thresholds (used by score rings, metric badges) ---
     score >= 70 → success green        (--color-accent-green / --color-success)
     score 40–69 → warning orange       (--color-warning / --color-warning-text)
     score <  40 → error red            (--color-error)                          */

  /* --- Active / Selected (sidebar item, selected row) --- */
  --color-active-border:       #46F1D9;     /* 3px left border on active nav item */
  --color-active-bg:           #E6F8F1;     /* mint-tinted bg for active/selected */
  --color-active-text:         #002E3B;     /* dark teal text on active item */
  --color-active-bright:       #34FFC7;     /* alt bright mint indicator */

  /* --- Semantic aliases --- */
  --primary-dark-bg:           var(--color-bg-primary);
  --secondary-dark-bg:         var(--color-bg-secondary);
  --primary-light-bg:          var(--color-bg-light);
  --secondary-light-bg:        var(--color-bg-light-alt);
  --primary-accent-bg:         var(--color-bg-accent-mint);
  --secondary-accent-bg:       var(--color-bg-accent-sky);
  --primary-heading-color:     var(--color-text-heading-dark);
  --primary-accent-heading-color: var(--color-accent-mint);
  --secondary-accent-heading-color: var(--color-accent-sky);

  /* ------------------------------------------------------------
     Typography Tokens
     ------------------------------------------------------------ */

  /* Families */
  --font-heading:   "Safiro", sans-serif;
  --font-body:      "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  /* Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Size scale */
  --text-h1:          70px;
  --text-h2:          55px;
  --text-h3:          30px;
  --text-h4:          24px;
  --text-h5:          20px;
  --text-subtitle-1:  18px;
  --text-subtitle-2:  14px;
  --text-subtitle-3:  12px;
  --text-body-accent: 20px;
  --text-body:        18px;
  --text-body-sm:     16px;
  --text-button:      16px;
  --text-caption:     12px;

  /* Line heights */
  --lh-heading:   1.1;
  --lh-body:      1.4;   /* always 140% for body */
  --lh-tight:     1.0;

  /* Letter spacing */
  --ls-heading:   -0.02em;
  --ls-button:     0.02em;
  --ls-caps:       0.05em;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 96px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-card:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-panel:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-modal:  0 8px 32px rgba(0,0,0,0.12);
}

/* ------------------------------------------------------------
   Semantic Element Styles
   ------------------------------------------------------------ */

h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--text-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text-heading-dark);
}

h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--text-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text-heading-dark);
}

h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--text-h3);
  line-height: var(--lh-heading);
  color: var(--color-text-heading-dark);
}

h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--text-h4);
  line-height: var(--lh-heading);
  color: var(--color-text-heading-dark);
}

h5 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--text-h5);
  line-height: var(--lh-heading);
  color: var(--color-text-heading-dark);
}

p, body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}

p.sm {
  font-size: var(--text-body-sm);
}

p.accent {
  font-size: var(--text-body-accent);
}

.subtitle-1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--text-subtitle-1);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-caps);
}

.subtitle-2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--text-subtitle-2);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-caps);
}

.subtitle-3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--text-subtitle-3);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-caps);
}

.btn-label {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--text-button);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-button);
}

code, pre {
  font-family: "Geist Mono", "SF Mono", "Fira Code", monospace;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
}

/* ------------------------------------------------------------
   Utility classes
   ------------------------------------------------------------ */
.text-accent-mint   { color: var(--color-accent-mint); }
.text-accent-sky    { color: var(--color-accent-sky); }
.text-muted         { color: var(--color-text-muted); }
.text-white         { color: var(--color-text-white); }
.bg-dark            { background-color: var(--color-bg-primary); }
.bg-secondary       { background-color: var(--color-bg-secondary); }
.bg-light           { background-color: var(--color-bg-light); }