/* =====================================================================
   LAPIS DESIGN SYSTEM — colors_and_type.css
   A luxury private-wealth identity built on HeroUI's token architecture.
   Palette derived from the brand moodboard (lapis-blue marble, navy,
   burgundy velvet, warm cream). Type: Almarai (Latin + Arabic).
   ---------------------------------------------------------------------
   Token model mirrors HeroUI: semantic colors (primary / secondary /
   success / warning / danger / default) each carry a 50–900 scale plus
   DEFAULT + foreground; layered surfaces are content1–4.
   ===================================================================== */

/* ----------------------------- FONTS ------------------------------- */
@font-face {
  font-family: "Almarai";
  src: url("fonts/Almarai-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Almarai";
  src: url("fonts/Almarai-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Almarai";
  src: url("fonts/Almarai-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Almarai";
  src: url("fonts/Almarai-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ============================== TOKENS ============================== */
:root {
  /* ---- Brand anchor colors (straight from the moodboard) ---- */
  --lapis-navy:     #022E4C;   /* deep navy — primary */
  --lapis-steel:    #517493;   /* steel blue — secondary */
  --lapis-burgundy: #56061D;   /* burgundy velvet — accent / danger */
  --lapis-cream:    #E2D9CB;   /* warm cream — canvas / sand-200 */

  /* ---- PRIMARY · navy scale ---- */
  --primary-50:  #E7EEF3;
  --primary-100: #C6D7E2;
  --primary-200: #9FBACD;
  --primary-300: #6E93AE;
  --primary-400: #3C6B8B;
  --primary-500: #0E4A6E;
  --primary-600: #06395A;
  --primary-700: #022E4C;   /* brand navy */
  --primary-800: #02233A;
  --primary-900: #011726;
  --primary:            var(--primary-700);
  --primary-foreground: #F6F2EA;

  /* ---- SECONDARY · burgundy scale (brand secondary) ---- */
  /* Burgundy is the secondary brand colour; it doubles as danger. */
  --secondary-50:  #FBEAEF;
  --secondary-100: #F3C7D3;
  --secondary-200: #E08CA1;
  --secondary-300: #C85571;
  --secondary-400: #9C2A45;
  --secondary-500: #7A1430;
  --secondary-600: #56061D;   /* brand burgundy */
  --secondary-700: #470518;
  --secondary-800: #340411;
  --secondary-900: #22030B;
  --secondary:            var(--secondary-600);
  --secondary-foreground: #F6E9DE;

  /* ---- TERTIARY · steel blue scale (supporting / info / focus) ---- */
  --steel-50:  #EEF2F5;
  --steel-100: #D7E0E7;
  --steel-200: #B7C8D3;
  --steel-300: #91A9B9;
  --steel-400: #6F8CA0;
  --steel-500: #517493;   /* brand steel */
  --steel-600: #415F7B;
  --steel-700: #324A61;
  --steel-800: #243646;
  --steel-900: #16222D;
  --tertiary:            var(--steel-500);
  --tertiary-foreground: #FFFFFF;

  /* ---- DANGER · burgundy (shares the secondary scale) ---- */
  --danger-50:  var(--secondary-50);
  --danger-100: var(--secondary-100);
  --danger-200: var(--secondary-200);
  --danger-300: var(--secondary-300);
  --danger-400: var(--secondary-400);
  --danger-500: var(--secondary-500);
  --danger-600: var(--secondary-600);
  --danger-700: var(--secondary-700);
  --danger-800: var(--secondary-800);
  --danger-900: var(--secondary-900);
  --danger:            var(--secondary-600);
  --danger-foreground: #FFFFFF;
  /* burgundy exposed as an explicit brand accent */
  --accent:            var(--secondary-600);
  --accent-foreground: #F6E9DE;

  /* ---- SUCCESS · muted emerald (harmonised, not HeroUI neon) ---- */
  --success-50:  #E9F2EC;
  --success-100: #C8DFD0;
  --success-200: #98C2A6;
  --success-300: #67A47C;
  --success-400: #3F8458;
  --success-500: #2C6E45;
  --success-600: #225737;
  --success-700: #1A4029;
  --success-800: #112C1C;
  --success-900: #0A1A11;
  --success:            var(--success-500);
  --success-foreground: #FFFFFF;

  /* ---- WARNING · antique ochre (sits with cream, not neon yellow) ---- */
  --warning-50:  #FBF3E4;
  --warning-100: #F4E1BE;
  --warning-200: #E9C588;
  --warning-300: #DCA851;
  --warning-400: #C68A2E;
  --warning-500: #A8741F;
  --warning-600: #875C19;
  --warning-700: #644413;
  --warning-800: #432D0D;
  --warning-900: #241806;
  --warning:            var(--warning-500);
  --warning-foreground: #FFFFFF;

  /* ---- WARM NEUTRAL · "sand" (default scale + dividers) ---- */
  --sand-50:  #FAF8F4;
  --sand-100: #F2ECE1;
  --sand-200: #E2D9CB;   /* brand cream */
  --sand-300: #D0C4B0;
  --sand-400: #B3A488;
  --sand-500: #8E8068;
  --sand-600: #6B5F4C;
  --sand-700: #4C4335;
  --sand-800: #322C22;
  --sand-900: #1C1810;

  /* HeroUI "default" maps to warm neutral */
  --default-50:  var(--sand-50);
  --default-100: var(--sand-100);
  --default-200: var(--sand-200);
  --default-300: var(--sand-300);
  --default-400: var(--sand-400);
  --default-500: var(--sand-500);
  --default-600: var(--sand-600);
  --default-700: var(--sand-700);
  --default-800: var(--sand-800);
  --default-900: var(--sand-900);
  --default:            var(--sand-200);
  --default-foreground: #1C1810;

  /* ---- SURFACES & FOUNDATIONS (light theme) ---- */
  --background:    #FBF9F5;   /* warm paper */
  --foreground:    #0B1C2A;   /* near-black navy ink */
  --foreground-500: #5C6B76;  /* muted ink */
  --content1:      #FFFFFF;   /* cards */
  --content1-foreground: #0B1C2A;
  --content2:      #F4EFE6;   /* elevated warm surface */
  --content2-foreground: #2A2018;
  --content3:      #ECE4D6;
  --content3-foreground: #3A2E22;
  --content4:      #E2D9CB;
  --content4-foreground: #4C4335;
  --divider:       rgba(11, 28, 42, 0.12);
  --focus:         var(--steel-500);
  --overlay:       rgba(6, 16, 24, 0.55);

  /* =========================== LAYOUT ============================= */
  /* radii (HeroUI: 8 / 12 / 14) */
  --radius-small:  8px;
  --radius-medium: 12px;
  --radius-large:  14px;
  --radius-full:   9999px;

  /* border widths */
  --border-small:  1px;
  --border-medium: 2px;
  --border-large:  3px;

  /* spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* shadows — softened & warm-tinted from HeroUI's set */
  --shadow-small:
    0px 0px 5px 0px rgba(11,28,42,0.02),
    0px 2px 10px 0px rgba(11,28,42,0.06),
    0px 0px 1px 0px rgba(11,28,42,0.30);
  --shadow-medium:
    0px 0px 15px 0px rgba(11,28,42,0.03),
    0px 2px 30px 0px rgba(11,28,42,0.08),
    0px 0px 1px 0px rgba(11,28,42,0.30);
  --shadow-large:
    0px 0px 30px 0px rgba(11,28,42,0.04),
    0px 30px 60px 0px rgba(11,28,42,0.12),
    0px 0px 1px 0px rgba(11,28,42,0.30);

  /* interaction */
  --hover-opacity: 0.85;
  --disabled-opacity: 0.5;
  --press-scale: 0.97;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition: 250ms var(--ease-out);

  /* ============================ TYPE ============================= */
  --font-sans: "Almarai", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;

  /* weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* HeroUI base type scale */
  --text-tiny:   0.75rem;   /* 12 */
  --text-small:  0.875rem;  /* 14 */
  --text-medium: 1rem;      /* 16 */
  --text-large:  1.125rem;  /* 18 */
  --leading-tiny:   1rem;
  --leading-small:  1.25rem;
  --leading-medium: 1.5rem;
  --leading-large:  1.75rem;

  /* display scale (editorial) */
  --text-display: 4.5rem;   /* 72 */
  --text-h1: 3rem;          /* 48 */
  --text-h2: 2.25rem;       /* 36 */
  --text-h3: 1.75rem;       /* 28 */
  --text-h4: 1.375rem;      /* 22 */
  --text-eyebrow: 0.8125rem;/* 13 */
}

/* ============================ DARK THEME =========================== */
[data-theme="dark"] {
  --background: #04141F;     /* deep navy-black */
  --foreground: #ECEEF0;
  --foreground-500: #93A2AE;
  --content1: #082234;       /* navy card */
  --content1-foreground: #ECEEF0;
  --content2: #0C2C42;
  --content2-foreground: #DCE4EA;
  --content3: #123749;
  --content3-foreground: #C6D2DA;
  --content4: #1A4358;
  --content4-foreground: #B3C2CC;
  --divider: rgba(226, 217, 203, 0.14);
  --overlay: rgba(0, 0, 0, 0.65);

  /* surfaces shift; brand hues stay but DEFAULT brightens for contrast */
  --primary:            var(--primary-400);
  --primary-foreground: #02131F;
  --secondary:          var(--secondary-400);
  --secondary-foreground: #F6E9DE;
  --tertiary:           var(--steel-400);
  --danger:             var(--danger-400);
  --accent:             var(--secondary-400);
  --focus:              var(--steel-400);
  --success:            var(--success-400);
  --warning:            var(--warning-400);

  --default:            var(--sand-800);
  --default-foreground: #F2ECE1;

  --shadow-small:
    0px 0px 5px 0px rgba(0,0,0,0.05),
    0px 2px 10px 0px rgba(0,0,0,0.20),
    inset 0px 0px 1px 0px rgba(255,255,255,0.12);
  --shadow-medium:
    0px 0px 15px 0px rgba(0,0,0,0.06),
    0px 2px 30px 0px rgba(0,0,0,0.22),
    inset 0px 0px 1px 0px rgba(255,255,255,0.12);
  --shadow-large:
    0px 0px 30px 0px rgba(0,0,0,0.07),
    0px 30px 60px 0px rgba(0,0,0,0.26),
    inset 0px 0px 1px 0px rgba(255,255,255,0.12);
  --hover-opacity: 0.9;
}

/* ====================== SEMANTIC TYPE CLASSES ====================== */
.lapis-display {
  font-family: var(--font-sans);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-display);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--foreground);
}
h1, .lapis-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-h1);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--foreground);
}
h2, .lapis-h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
h3, .lapis-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--foreground);
}
h4, .lapis-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-h4);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
.lapis-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-600);
}
.lapis-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-medium);
  line-height: var(--leading-large);
  color: var(--foreground);
}
.lapis-body-light {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-large);
  line-height: 1.65;
  color: var(--foreground-500);
}
.lapis-small {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--foreground-500);
}
.lapis-caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-tiny);
  line-height: var(--leading-tiny);
  letter-spacing: 0.01em;
  color: var(--foreground-500);
}
/* tabular figures for money / data */
.lapis-numeric {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1;
}
code, .lapis-code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--content2);
  color: var(--primary-700);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-small);
}