/* Google Fonts. Optional: add self-hosted TTFs under /public/fonts/ and @font-face rules. */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wdth,wght@0,6.25,100..900;0,100,100..900;1,6.25,100..900;1,100,100..900&display=swap');

/* ===================================================================
   Ariana.Digital — Colors & Type
   Brand palette: #FF7900, #07A3D1 + neutrals.
   =================================================================== */

/* Mono: system stack (Roboto Mono optional) */

:root {
  /* --- Brand colors (exact, per brief) -------------------------- */
  --brand-orange:        #FF7900;   /* primary action / accent */
  --brand-cyan:          #07A3D1;   /* wordmark / supporting accent */

  /* --- Extended scale (oklch-derived, tasteful not hallucinated) */
  --orange-50:           #FFF2EC;
  --orange-100:          #FFDAC6;
  --orange-300:          #FFA47A;
  --orange-500:          #FF7900;
  --orange-600:          #FF7900;
  --orange-700:          #D63D00;
  --orange-900:          #7A2300;

  --cyan-50:             #E6F6FC;
  --cyan-100:            #BFE6F4;
  --cyan-300:            #5EC2E2;
  --cyan-500:            #07A3D1;
  --cyan-700:            #0A7DA1;
  --cyan-900:            #063F51;

  /* --- Neutrals --------------------------------------------------- */
  --ink-900:             #111315;   /* primary text */
  --ink-700:             #33373B;   /* body */
  --ink-500:             #6B7075;   /* secondary text */
  --ink-400:             #9AA0A6;   /* tertiary / placeholder */
  --ink-300:             #C8CCD0;   /* borders */
  --ink-200:             #E5E7EA;   /* subtle borders */
  --ink-100:             #F2F3F5;   /* surface tint */
  --ink-50:              #F8F9FA;   /* page bg tint */
  --white:               #FFFFFF;

  /* --- Semantic foreground --------------------------------------- */
  --fg-1:                var(--ink-900);   /* headings */
  --fg-2:                var(--ink-700);   /* body */
  --fg-3:                var(--ink-500);   /* secondary */
  --fg-4:                var(--ink-400);   /* tertiary */
  --fg-inverse:          var(--white);
  --fg-link:             var(--brand-cyan);
  --fg-accent:           var(--brand-orange);

  /* --- Semantic surfaces ----------------------------------------- */
  --bg-page:             var(--white);
  --bg-muted:            var(--ink-50);
  --bg-raised:           var(--white);
  --bg-sunken:           var(--ink-100);
  --bg-dark:             var(--ink-900);
  --border-default:      var(--ink-200);
  --border-strong:       var(--ink-300);

  /* --- Status ---------------------------------------------------- */
  --success:             #1DAA64;
  --warning:             #F5A623;
  --danger:              #E4383A;
  --info:                var(--brand-cyan);

  /* --- Signature gradient (seen across the site) ----------------- */
  --grad-warm:           linear-gradient(135deg, #FF7900 0%, #FF7900 100%);
  --grad-duo:            linear-gradient(135deg, #FF7900 0%, #07A3D1 100%);

  /* --- Typography: families -------------------------------------- */
  --font-sans:           'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-condensed:      'Roboto Condensed', 'Roboto', system-ui, sans-serif;
  --font-semi-condensed: 'Roboto', system-ui, sans-serif; /* was SemiCondensed TTF; width via variable Roboto */
  --font-mono:           ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display:        'Roboto Condensed', 'Roboto', system-ui, sans-serif;

  /* --- Typography: type scale ------------------------------------ */
  --fs-display:          clamp(40px, 5vw, 64px);
  --fs-h1:               clamp(32px, 3.6vw, 48px);
  --fs-h2:               clamp(26px, 2.6vw, 36px);
  --fs-h3:               22px;
  --fs-h4:               18px;
  --fs-body-lg:          18px;
  --fs-body:             16px;
  --fs-body-sm:          14px;
  --fs-caption:          12px;
  --fs-eyebrow:          11px;

  /* --- Typography: weights --------------------------------------- */
  --fw-light:            300;
  --fw-regular:          400;
  --fw-medium:           500;
  --fw-bold:             700;
  --fw-black:            900;

  /* --- Typography: leading --------------------------------------- */
  --lh-tight:            1.15;
  --lh-snug:             1.3;
  --lh-normal:           1.5;
  --lh-relaxed:          1.65;

  /* --- Letterspacing --------------------------------------------- */
  --tracking-eyebrow:    0.12em;
  --tracking-tight:      -0.01em;
  --tracking-display:    -0.02em;

  /* --- Spacing --------------------------------------------------- */
  --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:             96px;

  /* --- Radii ----------------------------------------------------- */
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           12px;
  --radius-xl:           20px;
  --radius-pill:         999px;

  /* --- Shadows --------------------------------------------------- */
  --shadow-sm:           0 1px 2px rgba(17, 19, 21, 0.06);
  --shadow-md:           0 4px 12px rgba(17, 19, 21, 0.08);
  --shadow-lg:           0 12px 32px rgba(17, 19, 21, 0.12);
  --shadow-glow-orange:  0 8px 24px rgba(255, 121, 0, 0.28);
  --shadow-glow-cyan:    0 8px 24px rgba(7, 163, 209, 0.22);

  /* --- Motion ---------------------------------------------------- */
  --ease-standard:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:             cubic-bezier(0.4, 0, 1, 1);
  --ease-out:            cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:            120ms;
  --dur-base:            200ms;
  --dur-slow:            360ms;
}

/* ===================================================================
   Semantic type classes
   =================================================================== */

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}

.h1 { font-family: var(--font-sans); font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight);  letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug);   letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--fg-1); }
.h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--fg-1); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--brand-orange);
}

.body-lg { font-family: var(--font-sans); font-size: var(--fs-body-lg); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-2); }
.body    { font-family: var(--font-sans); font-size: var(--fs-body);    font-weight: var(--fw-regular); line-height: var(--lh-normal);  color: var(--fg-2); }
.body-sm { font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-regular); line-height: var(--lh-normal);  color: var(--fg-2); }
.caption { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-regular); line-height: var(--lh-normal);  color: var(--fg-3); }

.code, code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.numeric-large {
  font-family: var(--font-sans);
  font-size: 72px;
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand-orange);
}