/* ============================================================
   Feonix Aesthetics — Colors & Type
   ============================================================
   The brand sits at the intersection of clinical precision and
   couture luxury. The palette runs deep obsidian → warm ivory,
   anchored by a single signature ember (a copper-rose drawn from
   the phoenix). Type pairs a refined serif display (Cormorant)
   with the uploaded sans (Roboto) for body + UI.
   ============================================================ */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Color tokens ---------- */

:root {
  /* Obsidian scale — primary brand darks */
  --obsidian:        #0B0B0C;   /* the brand black */
  --ink:             #131315;   /* surface, off-black */
  --smoke:           #1E1E20;   /* panel */
  --graphite:        #2A2A2D;   /* raised panel, hairline-on-dark */
  --slate:           #3A3A3E;   /* divider on dark */

  /* Warm neutral scale — light surfaces */
  --bone:            #FBF8F3;   /* paper */
  --ivory:           #F2ECE2;   /* warm light */
  --linen:           #E6DED1;   /* muted cream */
  --stone:           #B8AFA1;   /* warm gray */
  --ash:             #6E665A;   /* muted text on light */

  /* Neutrals — cool fallback */
  --mist:            #C4C4C8;
  --fog:             #8C8C92;

  /* The signature — Phoenix ember */
  --ember:           #C0825A;   /* primary accent, copper-rose */
  --ember-deep:      #9E6442;   /* hover / pressed */
  --ember-soft:      #E3B894;   /* tint */
  --ember-glow:      #F4D9C0;   /* faint wash */

  /* Champagne — secondary luxury accent */
  --champagne:       #D4B98C;
  --champagne-deep:  #A88A5C;

  /* Semantic */
  --success:         #6E8F6E;
  --warning:         #D4B98C;
  --danger:          #B05A4E;
  --info:            #6E7F8F;

  /* Foreground on dark surfaces */
  --fg-1:            #FBF8F3;   /* primary text */
  --fg-2:            #C4BDB1;   /* secondary */
  --fg-3:            #8A8377;   /* tertiary, captions */
  --fg-mute:         #5A554C;   /* disabled */

  /* Foreground on light surfaces */
  --on-light-1:      #0B0B0C;
  --on-light-2:      #3A352D;
  --on-light-3:      #6E665A;

  /* Strokes */
  --stroke-dark:     rgba(255, 248, 235, 0.10);
  --stroke-darker:   rgba(255, 248, 235, 0.06);
  --stroke-light:    rgba(11, 11, 12, 0.10);
  --stroke-lighter:  rgba(11, 11, 12, 0.06);

  /* Type families — Feonix is a single-family sans system.
     Inter does every job: display (light weight, uppercase, tracked),
     body, UI. Roboto stays wired as a fallback / alternate. */
  --font-display:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     "Helvetica Neue", Arial, sans-serif;
  --font-alt:        "Roboto", "Inter", Helvetica, Arial, sans-serif;
  --font-mono:       ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Weights */
  --w-thin:          200;
  --w-light:         300;
  --w-regular:       400;
  --w-medium:        500;
  --w-semibold:      600;
  --w-bold:          700;

  /* Type scale — display is intended for sparing, ceremonial use
     (hero treatment names, section starters). Body is Roboto. */
  --t-display-xl:    96px;      /* hero */
  --t-display-l:     72px;
  --t-display-m:     56px;
  --t-display-s:     40px;

  --t-headline-l:    32px;
  --t-headline-m:    24px;
  --t-headline-s:    20px;

  --t-body-l:        18px;
  --t-body-m:        16px;
  --t-body-s:        14px;
  --t-caption:       13px;
  --t-micro:         11px;

  /* Line heights */
  --lh-tight:        1.05;       /* display caps */
  --lh-snug:         1.2;        /* headlines */
  --lh-normal:       1.5;        /* body */
  --lh-loose:        1.7;        /* long-form */

  /* Letter-spacing — small caps & UI nav get generous tracking
     (the McLaren-style wide all-caps signature). Display caps
     get a hair of negative tracking. */
  --ls-display:      -0.01em;
  --ls-headline:      0em;
  --ls-body:         0em;
  --ls-eyebrow:      0.22em;     /* nav, eyebrow labels */
  --ls-micro:        0.16em;

  /* Spacing scale — 4px base */
  --s-0:             0;
  --s-1:             4px;
  --s-2:             8px;
  --s-3:             12px;
  --s-4:             16px;
  --s-5:             20px;
  --s-6:             24px;
  --s-8:             32px;
  --s-10:            40px;
  --s-12:            48px;
  --s-16:            64px;
  --s-20:            80px;
  --s-24:            96px;
  --s-32:            128px;

  /* Radius — Feonix is restrained. Most surfaces are sharp;
     pill-radius is reserved for the primary CTA. */
  --r-none:          0;
  --r-xs:            2px;
  --r-sm:            4px;
  --r-md:            8px;
  --r-lg:            14px;
  --r-pill:          999px;

  /* Elevation — used very sparingly, mostly on light surfaces.
     Dark mode uses borders + inner glow, not shadows. */
  --shadow-1:        0 1px 2px rgba(11, 11, 12, 0.06),
                     0 1px 1px rgba(11, 11, 12, 0.04);
  --shadow-2:        0 4px 10px rgba(11, 11, 12, 0.08),
                     0 2px 4px rgba(11, 11, 12, 0.04);
  --shadow-3:        0 14px 36px rgba(11, 11, 12, 0.14),
                     0 6px 10px rgba(11, 11, 12, 0.06);
  --shadow-ember:    0 10px 30px rgba(192, 130, 90, 0.30);

  /* Motion */
  --ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-luxury:     cubic-bezier(0.16, 1, 0.3, 1);   /* slow settle */
  --dur-fast:        160ms;
  --dur-base:        260ms;
  --dur-slow:        500ms;
  --dur-cinematic:   900ms;
}

/* ---------- Semantic type styles ---------- */

.feonix-display-xl,
.feonix-display-l,
.feonix-display-m,
.feonix-display-s {
  font-family: var(--font-display);
  font-weight: var(--w-thin);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  font-feature-settings: "ss01", "liga";
}
.feonix-display-xl { font-size: var(--t-display-xl); }
.feonix-display-l  { font-size: var(--t-display-l); }
.feonix-display-m  { font-size: var(--t-display-m); }
.feonix-display-s  { font-size: var(--t-display-s); }

.feonix-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-light);
  letter-spacing: 0.02em;
  text-transform: none;
}

.feonix-headline-l,
.feonix-headline-m,
.feonix-headline-s {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
}
.feonix-headline-l { font-size: var(--t-headline-l); }
.feonix-headline-m { font-size: var(--t-headline-m); }
.feonix-headline-s { font-size: var(--t-headline-s); font-weight: var(--w-regular); }

.feonix-body-l,
.feonix-body-m,
.feonix-body-s {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
}
.feonix-body-l { font-size: var(--t-body-l); line-height: var(--lh-loose); }
.feonix-body-m { font-size: var(--t-body-m); }
.feonix-body-s { font-size: var(--t-body-s); }

.feonix-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

.feonix-micro {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
}

/* ---------- Helpers ---------- */

.feonix-bg-obsidian { background: var(--obsidian); color: var(--fg-1); }
.feonix-bg-ink      { background: var(--ink);      color: var(--fg-1); }
.feonix-bg-bone     { background: var(--bone);     color: var(--on-light-1); }
.feonix-bg-ivory    { background: var(--ivory);    color: var(--on-light-1); }