/* =============================================================
   D·studio — Colors & Type
   The visual foundation for the D·studio brand system.
   Dark-first, black canvas, Aeonik geometric sans, chrome/
   BLACKBOX surfaces, cool "protection" gradients.
   ============================================================= */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Aeonik";
  font-weight: 200;
  font-style: normal;
  src: url("./fonts/Aeonik-Air.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  font-weight: 200;
  font-style: italic;
  src: url("./fonts/Aeonik-AirItalic.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  font-weight: 300;
  font-style: normal;
  src: url("./fonts/Aeonik-Light.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  font-weight: 300;
  font-style: italic;
  src: url("./fonts/Aeonik-LightItalic.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  font-weight: 400;
  font-style: normal;
  src: url("./fonts/Aeonik-Regular.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  font-weight: 500;
  font-style: normal;
  src: url("./fonts/Aeonik-Medium.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  font-weight: 500;
  font-style: italic;
  src: url("./fonts/Aeonik-MediumItalic.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  font-weight: 700;
  font-style: normal;
  src: url("./fonts/Aeonik-Bold.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  font-weight: 700;
  font-style: italic;
  src: url("./fonts/Aeonik-BoldItalic.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  font-weight: 900;
  font-style: normal;
  src: url("./fonts/Aeonik-Black.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  font-weight: 900;
  font-style: italic;
  src: url("./fonts/Aeonik-BlackItalic.otf") format("opentype");
  font-display: swap;
}

/* Aeonik now covers the full weight range: Air 200 · Light 300 ·
   Regular 400 · Medium 500 · Bold 700 · Black 900.
   Italics supplied for: 200, 300, 500, 700, 900. */

:root {
  /* ---------- COLOR — CORE ----------
     The system is almost monochrome. Color is used sparingly, as
     an accent or as a mood (deep radial glow in the background). */

  /* Neutrals */
  --ds-black:         rgb(0, 0, 0);         /* primary canvas */
  --ds-near-black:    rgb(7, 7, 7);         /* LinkedIn cover bg */
  --ds-off-black:     rgb(27, 27, 27);      /* Carousel stage bg */
  --ds-graphite:      rgb(48, 48, 50);      /* nav pill base */
  --ds-ash:           rgb(88, 88, 90);
  --ds-silver:        rgb(174, 174, 178);   /* chrome base */
  --ds-mist:          rgb(204, 204, 204);
  --ds-fog:           rgb(217, 217, 217);
  --ds-bone:          rgb(229, 229, 229);
  --ds-white:         rgb(255, 255, 255);

  /* Alpha whites (for layered blurs + highlights) */
  --ds-w-03:          rgba(255,255,255,0.03);
  --ds-w-07:          rgba(255,255,255,0.07);
  --ds-w-10:          rgba(255,255,255,0.10);
  --ds-w-30:          rgba(255,255,255,0.30);
  --ds-w-40:          rgba(255,255,255,0.40);
  --ds-w-65:          rgba(255,255,255,0.65);
  --ds-w-67:          rgba(255,255,255,0.67);
  --ds-w-72:          rgba(255,255,255,0.72);

  /* Accents (used rarely, as mood / cover gradients) */
  --ds-periwinkle:    rgb(223, 229, 255);   /* cool lavender-white accent */
  --ds-indigo:        rgb(14, 82, 255);     /* deep editorial blue */
  --ds-indigo-deep:   rgb(51, 103, 145);
  --ds-violet-deep:   rgb(91, 98, 148);     /* radial gradient anchor */
  --ds-mint-deep:     rgb(17, 114, 104);    /* blue→teal radial mood */
  --ds-mint-bright:   rgb(32, 93, 216);
  --ds-yellow:        rgb(255, 242, 0);     /* stroke accent */
  --ds-copper:        rgb(127, 88, 68);     /* cover inner-glow */
  --ds-ember:         rgb(250, 115, 5);     /* cover inner-glow */

  /* Semantic */
  --ds-success:       rgb(52, 199, 89);     /* iOS-style toggle green */
  --ds-danger:        rgb(255, 90, 90);
  --ds-danger-deep:   rgb(198, 48, 43);
  --ds-danger-dark:   rgb(145, 38, 38);

  /* Shadows (signature) — these are the "BLACKBOX" inner-bevel
     + chrome-ring combinations used across the brand. */
  --ds-bevel:
    inset 1px 2px 2px 0 rgba(255,255,255,0.67),
    inset 0px -3px 2px 0 rgba(0,0,0,0.23),
    inset -2px -2px 2px 0 rgba(229,229,229,0.25);
  --ds-chrome-ring:
    0px 0px 10px 0 rgba(45,45,45,0.07),
    inset 0px 0px 8px 0 rgba(111,111,129,0.51),
    0px 0px 0px 2px rgba(93,93,98,0.63);
  --ds-glow-cool:     0 1px 44px 0 rgba(223,229,255,0.45);
  --ds-glow-warm:
    inset 0px 0px 44px 5px rgba(127,88,68,0.80),
    inset 0px 0px 12px 0 rgba(255,255,255,0.55),
    inset 0px 0px 17px 0 rgba(250,115,5,0.35);
  --ds-drop-soft:     0px 0px 24px 0 rgba(0,0,0,0.25);

  /* Semantic foreground / background / border */
  --ds-bg:            var(--ds-black);
  --ds-bg-elevated:   rgba(48,48,50,0.27);
  --ds-fg:            var(--ds-white);
  --ds-fg-muted:      var(--ds-bone);
  --ds-fg-subtle:     rgba(255,255,255,0.60);
  --ds-fg-faint:      rgba(255,255,255,0.30);
  --ds-border:        rgba(255,255,255,0.10);
  --ds-border-strong: rgba(255,255,255,0.30);

  /* Radii */
  --ds-r-sm: 10px;
  --ds-r-md: 18px;
  --ds-r-lg: 20px;
  --ds-r-xl: 34px;
  --ds-r-2xl: 52px;
  --ds-r-pill: 100px;

  /* Spacing (derived from Figma paddings) */
  --ds-s-1: 4px;
  --ds-s-2: 8px;
  --ds-s-3: 10px;
  --ds-s-4: 14px;
  --ds-s-5: 22px;
  --ds-s-6: 28px;
  --ds-s-7: 34px;
  --ds-s-8: 44px;

  /* ---------- TYPE ---------- */
  --ds-font-sans:
    "Aeonik", "Aeonik Fallback", -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --ds-font-mono: "SF Mono", ui-monospace, Menlo, Monaco, monospace;

  /* Base family */
  font-family: var(--ds-font-sans);

  /* Display scale — poster-grade, tight leading */
  --ds-display-xxl: 700 175px/0.9 var(--ds-font-sans);   /* poster, big LinkedIn covers */
  --ds-display-xl:  700 135px/0.9 var(--ds-font-sans);
  --ds-display-lg:  700 125px/0.95 var(--ds-font-sans);
  --ds-display-md:  700 105px/0.95 var(--ds-font-sans);
  --ds-display-sm:  700 85px/0.68 var(--ds-font-sans);   /* tight "WHAT WE BUILT" */

  /* Headline scale */
  --ds-headline-lg: 700 65px/1.05 var(--ds-font-sans);
  --ds-headline-md: 700 46px/1.1 var(--ds-font-sans);
  --ds-headline-sm: 500 32px/1.1 var(--ds-font-sans);

  /* Body / supporting */
  --ds-title:       500 27px/1.15 var(--ds-font-sans);
  --ds-body-lg:     400 20px/1.4 var(--ds-font-sans);
  --ds-body:        400 19px/1.45 var(--ds-font-sans);
  --ds-body-sm:     400 16px/1.45 var(--ds-font-sans);
  --ds-caption:     500 13px/1.0 var(--ds-font-sans);
  --ds-micro:       500 11px/1.0 var(--ds-font-sans);

  /* Editorial — wide-tracked caps for tags / eyebrows */
  --ds-eyebrow-tracking: 0.24em;
  --ds-tag-tracking:     0.64em;  /* "NEW website" etched style */
}

/* Default page styles — opt in by setting class "ds-dark" on a page root */
.ds-dark {
  background: var(--ds-bg);
  color: var(--ds-fg);
  font: var(--ds-body);
  font-family: var(--ds-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic heading helpers */
.ds-h1 { font: var(--ds-display-md); letter-spacing: -0.01em; }
.ds-h2 { font: var(--ds-headline-lg); }
.ds-h3 { font: var(--ds-headline-md); }
.ds-h4 { font: var(--ds-headline-sm); }
.ds-eyebrow {
  font: var(--ds-caption);
  text-transform: uppercase;
  letter-spacing: var(--ds-eyebrow-tracking);
  color: var(--ds-fg-subtle);
}
.ds-tag-etched {
  font-weight: 300;
  letter-spacing: var(--ds-tag-tracking);
  text-transform: uppercase;
}
.ds-body { font: var(--ds-body); }
.ds-caption { font: var(--ds-caption); color: var(--ds-fg-subtle); }

/* The signature glossy/chrome surface. Apply to any block for the
   "BLACKBOX" or chrome-pill look. Pair with a base backgroundColor. */
.ds-bevel    { box-shadow: var(--ds-bevel); }
.ds-chrome {
  background:
    linear-gradient(rgba(174,174,174,0.65), rgba(174,174,174,0.65)),
    linear-gradient(rgba(208,208,222,0.16) 0%, rgba(169,163,195,0.16) 59%, rgba(155,185,187,0.16) 100%);
  border: 4px solid rgba(255,255,255,0.63);
  box-shadow: inset 0 0 14px 0 rgba(0,0,0,0.15);
  color: var(--ds-white);
}
.ds-blackbox {
  color: var(--ds-white);
  background: linear-gradient(rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 100%);
  box-shadow: var(--ds-bevel);
}

/* =============================================================
   SDS — Lightinderm Audit Deck token layer
   A companion system used for the SaaS audit-deck surface.
   Same Aeonik family, different palette (glass/violet/card),
   different radii (33/21/16/14), and its own signature glows.
   Prefix with --sds- to keep separate from the D·studio core.
   ============================================================= */
:root {
  /* Backgrounds */
  --sds-bg:               rgb(10, 10, 11);            /* page black */
  --sds-bg-card:          rgb(20, 20, 21);            /* solid card */
  --sds-bg-card-glass:    rgba(24, 24, 26, 0.58);     /* 58% glass card */
  --sds-bg-card-muted:    rgba(28, 28, 30, 0.43);     /* 43% muted card */
  --sds-bg-elevated:      rgb(32, 32, 32);            /* elevated surface */
  --sds-bg-card-inner:    linear-gradient(rgba(6,6,6,0.60) 0%, rgba(17,17,19,0.30) 76%, rgba(27,27,30,0.20) 100%);

  /* Text */
  --sds-text-heading:     rgb(239, 239, 239);         /* #EFEFEF */
  --sds-text-heading-alt: rgb(230, 230, 241);         /* blue-tinted heading */
  --sds-text-secondary:   rgb(199, 199, 204);         /* card titles */
  --sds-text-muted:       rgb(163, 163, 174);         /* body */
  --sds-text-nav:         rgb(229, 229, 229);         /* nav label */

  /* Borders & strokes */
  --sds-border-subtle:       rgba(54, 54, 54, 0.80);    /* inner card border */
  --sds-border-muted:        rgba(54, 52, 59, 0.20);    /* outer card frame */
  --sds-border-card-accent:  rgba(54, 52, 59, 0.24);    /* proposition card */
  --sds-border-thin:         rgba(255, 255, 255, 0.06); /* comp-shell outline */

  /* Glow / accent */
  --sds-glow-lavender:   rgba(203, 186, 227, 0.10);    /* CTA halo */
  --sds-glow-frost:      rgba(223, 217, 231, 0.20);    /* diffuse frost */
  --sds-glow-card:       rgba(111, 111, 129, 0.51);    /* card inner shadow */
  --sds-glow-green:      rgba( 76, 131,  83, 0.03);    /* opportunity ambient */
  --sds-glow-green-soft: rgba(217, 228, 231, 0.20);    /* opportunity rim */
  --sds-glow-cta-deep:   rgba( 32,  16,  98, 0.35);    /* CTA deep blue */

  /* Radii (SDS) */
  --sds-r-xl:  33px;   /* cards: stat, pricing, opportunity, proposition */
  --sds-r-lg:  21px;   /* card inner containers */
  --sds-r-md:  16px;   /* badges / section labels */
  --sds-r-sm:  14px;   /* duration tags / small chips */
  --sds-r-pill: 40px;  /* CTA button / nav tab */

  /* Spacing (SDS — named from spacing-grid) */
  --sds-section-gap:       66px;  /* header → content blocks */
  --sds-card-gap-lg:       31px;  /* stat/pricing card gap */
  --sds-card-gap-sm:       19px;  /* list/opportunity card gap */
  --sds-text-gap-header:   34px;  /* badge → heading */
  --sds-text-gap-body:     30px;  /* heading → body paragraph */
  --sds-text-gap-inline:   10px;  /* title → description within a card */
  --sds-card-padding-lg:   28px;  /* opportunity card inner padding */
  --sds-card-padding-sm:   23px;  /* proposition item padding */
  --sds-badge-pad-x:       17px;
  --sds-badge-pad-y:       14px;
  --sds-button-pad-x:      30px;
  --sds-button-pad-y:      21px;
  --sds-inner-card-pad-x:  25px;
  --sds-inner-card-pad-y:  21px;

  /* Shadows / effects (SDS) */
  --sds-shadow-card-glass:
    inset 0 0 14px 0 rgba(111,111,129,0.51),
    0 0 20px 0 rgba(45,41,53,0.25);
  --sds-shadow-opportunity:
    0 0 64px 0 rgba(217,228,231,0.20),
    0 0 44px 0 rgba( 76,131, 83,0.03),
    inset 1px 1px 3px 0 rgba(255,255,255,0.12),
    inset -1px -1px 14px 0 rgba(255,255,255,0.07);
  --sds-shadow-cta:
    0 0 24px 0 rgba(223,217,231,0.20),
    0 0 14px 0 rgba(203,186,227,0.10),
    0 0 15px 0 rgba( 32, 16, 98,0.35),
    inset 0 0 14px 0 rgba(255,255,255,0.25),
    inset 1px 1px 2px 0 rgba(255,255,255,0.38),
    inset -1px -1px 2px 0 rgba(255,255,255,0.10);
  --sds-shadow-duration:   0 1px 6px 0 rgba(0,0,0,0.25);
  --sds-backdrop-blur:     blur(9px);

  /* Type scale (SDS) — explicit sizes documented in the token deck */
  --sds-h1:        700 48px/1.0 var(--ds-font-sans);   /* Heading 1 */
  --sds-h2:        700 38px/1.05 var(--ds-font-sans);  /* Heading 2 */
  --sds-stat:      700 45px/1.0 var(--ds-font-sans);   /* big stat values */
  --sds-counter:   700 27px/1.0 var(--ds-font-sans);   /* 01 / 02 step numbers */
  --sds-card-title:700 21px/1.0 var(--ds-font-sans);
  --sds-body:      400 19px/1.4 var(--ds-font-sans);
  --sds-body-sm:   400 17px/1.4 var(--ds-font-sans);
  --sds-badge-lbl: 500 18px/1.0 var(--ds-font-sans);
  --sds-nav-tab:   500 15px/24px var(--ds-font-sans);
  --sds-duration:  400 14px/1.0 var(--ds-font-sans);
}

/* Page root for an SDS (audit-deck) surface */
.sds-page {
  background: var(--sds-bg);
  color: var(--sds-text-heading);
  font: var(--sds-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}