/* =============================================================================
   Het Shah — Design System tokens (single source of truth)
   -----------------------------------------------------------------------------
   Every page links this file. Change a value HERE and it updates across the
    whole website (index.html, projects.html, projects.css, and the
    design-system.html reference page).

   Colors use the pattern  var(--token-<uuid>, #hex):
     - On pages that still carry Strand/Framer's raw --token-<uuid> variables
       (index.html), the alias resolves to that token (identical hex).
     - On standalone pages the alias falls back to the #hex.
   Never hardcode a new hex in a component — add or edit an alias here instead.
   ============================================================================= */
:root {
  /* ---- Color · text ---------------------------------------------------- */
  --color-text-primary:    var(--token-17151d22-e81f-43e5-8876-d5286d6cf070, #fafaf9);
  --color-text-secondary:  var(--token-3354c3de-221c-4edd-ae1d-909c9020f86d, #a6a09b);
  --color-text-tertiary:   var(--token-cefbcc11-70c9-467a-ad0a-ef0379160d6f, #79716b);

  /* ---- Color · surface ------------------------------------------------- */
  --color-bg-base:         var(--token-7f40e4a1-2b83-444e-8765-465c7d3596ab, #110f0d);
  --color-bg-surface:      var(--token-93b991d8-cb67-4763-830d-23defa20a3ea, #1c1917);

  /* ---- Color · border -------------------------------------------------- */
  --color-border:          var(--token-f3013730-45dd-4b90-8bef-48999f95aa1d, #292524);

  /* ---- Color · accents ------------------------------------------------- */
  --color-accent-info:     var(--token-5e110c3f-82c1-4736-86cd-104cc5e3bfff, #36c5f0);
  --color-accent-success:  var(--token-1b607253-4aac-469b-9eb8-fd5858f5863c, #10ec90);
  --color-accent-warn:     var(--token-d5c4dbc3-b3ce-4d57-8583-5c04401312ab, #f9ab00);
  --color-accent-error:    var(--token-83011b35-94f4-4b05-950b-90fd095a6bea, #e5484d);

  /* ---- Theme meta ------------------------------------------------------ */
  color-scheme: dark;
  /* RGB triplet of the page background, used behind text sitting over the
     fluid animations. Flips per theme so legibility veils + text glows always
     track the surface color. Consumed as rgba(var(--readability-scrim-rgb), a). */
  --readability-scrim-rgb: 17, 15, 13;

  /* ---- Typography · families ------------------------------------------- */
  --font-sans: "Geist", "Geist Placeholder", sans-serif;
  --font-mono: "Geist Mono", monospace;

  /* ---- Typography · weights -------------------------------------------- */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  /* ---- Typography · size scale ----------------------------------------- */
  --font-size-display: 56px;  /* hero + section titles, quote statement       */
  --font-size-title:   48px;  /* CTA title                                    */
  --font-size-h2:      36px;  /* large testimonial quote / mobile display     */
  --font-size-h3:      22px;  /* card title                                   */
  --font-size-lg:      18px;  /* lead / intro copy, footer name               */
  --font-size-md:      17px;  /* secondary intro copy                         */
  --font-size-base:    16px;  /* body / description                           */
  --font-size-sm:      14px;  /* nav links, tabs, buttons                     */
  --font-size-meta:    13px;  /* mono meta / credits                          */
  --font-size-xs:      12px;  /* mono eyebrow / uppercase label               */

  /* ---- Typography · line-height ---------------------------------------- */
  --line-height-display: 1.04;
  --line-height-snug:    1.1;
  --line-height-heading: 1.35;
  --line-height-body:    1.6;

  /* ---- Space scale (matches paddings/gaps used across sections) -------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-11: 44px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-26: 104px;
  --space-28: 112px;

  /* ---- Radii ----------------------------------------------------------- */
  --radius-xs:     4px;   /* select / small control     */
  --radius-sm:     6px;   /* card media                 */
  --radius-md:     8px;   /* button, nav link, tab       */
  --radius-lg:     10px;  /* CTA button                 */
  --radius-xl:     12px;  /* large card                 */
  --radius-pill:   56px;  /* filter tab pill            */
  --radius-circle: 50%;   /* carousel arrow             */

  /* ---- Border ---------------------------------------------------------- */
  --border-width:    1px;
  --border-hairline: 1px solid var(--color-border);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-standard:     ease;
  --transition-fast:   160ms ease;  /* hover/color changes on controls & links */
  --transition-medium: 180ms ease;  /* card background                          */

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-menu: 0 16px 32px rgba(0, 0, 0, 0.32);

  /* ---- Focus ----------------------------------------------------------- */
  --focus-ring:        2px solid var(--color-accent-info);
  --focus-ring-offset: 3px;

  /* ---- Layout ---------------------------------------------------------- */
  --layout-max-width: 1400px;
  --layout-gutter:    40px;
  --nav-height:       68px;
}

[data-hs-name="Integrations"][name="Integrations"] {
  display: none !important;
}

/* =============================================================================
   Light theme
   -----------------------------------------------------------------------------
  Inactive while pages enforce data-theme="dark" on <html>. Overrides the
   semantic --color-* aliases used by components AND the raw Framer
   --token-<uuid> palette that the exported chrome paints straight onto <body>.
   Accents are intentionally shared across themes to keep the brand consistent.
   ============================================================================= */
:root[data-theme="light"] {
  color-scheme: light;

  --color-text-primary:   #1c1917;
  --color-text-secondary: #57534e;
  --color-text-tertiary:  #6f675f;

  --color-bg-base:    #faf8f5;
  --color-bg-surface: #efeae3;

  --color-border:     #e6dfd5;

  --readability-scrim-rgb: 250, 248, 245;
}

/* The exported homepage chrome reads the raw Framer tokens directly off <body>,
   so re-map the neutral ramp to its light mirror here. This selector
   (specificity 0,2,1) intentionally outranks the body{} block shipped in the
   exported stylesheet. Accent tokens are omitted on purpose — they inherit
   their shared dark values. */
:root[data-theme="light"] body {
  --token-7f40e4a1-2b83-444e-8765-465c7d3596ab: #faf8f5; /* bg base */
  --token-93b991d8-cb67-4763-830d-23defa20a3ea: #efeae3; /* bg surface */
  --token-f3013730-45dd-4b90-8bef-48999f95aa1d: #e6dfd5; /* border */
  --token-17151d22-e81f-43e5-8876-d5286d6cf070: #1c1917; /* text primary */
  --token-3354c3de-221c-4edd-ae1d-909c9020f86d: #57534e; /* text secondary */
  --token-cefbcc11-70c9-467a-ad0a-ef0379160d6f: #6f675f; /* text tertiary */
  --token-b171d873-56c5-4b61-933d-325079b55926: #1c1917;
  --token-52462940-c15c-4103-9816-370bb3c11bfa: #efeae3;
  --token-49f482bf-7282-4f8a-9849-f4d6c5f1f94c: #efeae3;
  --token-d77c8f0f-067e-4a45-ac82-2913bb2aee68: #e6dfd5;
  --token-d374d93c-0fe8-421f-a111-c491a4a873a6: #1c1917;
  --token-e308c24b-f83a-4af3-938d-f30465c0b60a: #44403b;
  --token-3b4d6f03-62c3-4973-a45f-106736577695: #57534e;
  --token-148ab549-faa2-4e43-be76-92abb380b315: #e6dfd5;
  --token-fa695f43-dc97-4fcb-890e-19bee8613bc8: #d9d2c8;
  --token-57c56f68-f082-419e-90db-9531e03d4b87: #57534e;
  --token-2f1d35ad-f881-4439-84f5-765e4d808479: #6f675f;
  --token-78d1b0a0-3296-4d25-9069-55a6c86138e3: #e6dfd5;
  --token-09a0b579-0f15-4449-80ce-92fd13281fd7: #1c1917;
  --token-494a45c3-2553-4e41-8258-c9545bf7163f: #d9d2c8;
  --token-67732ab8-fe77-4ba4-8c23-2c487558049e: #8b857d;
  --token-5d8f23dc-92a7-4ff0-acf1-4f5feb4637ee: #1c1917;
  --token-bb9172d5-978a-4462-9d85-50327c10d262: #e6dfd5;
  --token-28be4a51-bbd3-4a71-bc59-db9d73dedaf5: #d9d2c8;
  --token-dbfb79b6-fd8a-46f1-b1ff-21a736547d33: #ffffff;
  --token-68852133-66bc-42bc-90a0-dbfa7557286d: #1c1917;
  --token-836557f1-9a2a-42ae-bf18-328e4f3549e3: #8b857d;
  --token-b5638a62-26ff-4efc-a9d7-90e970d50095: #8b857d;
  --token-3675b12a-f067-4854-8dda-6dbb38f8755b: #e6dfd5;
  --token-a9ea621e-bd19-4f4b-962f-5a113b46a5eb: #d9d2c8;
  --token-5206bb0a-1eac-4660-9763-613fdbda3479: #efeae3;
  --token-efb6b80c-ff66-4fd5-b06e-7af1e4433402: #e6dfd5;
  --token-ba35e0ab-850d-49cf-be59-934f032ab5a0: #1c1917;
  --token-d84f0da5-69e7-4c51-a9dd-4ad7ce3301a8: #e6dfd5;
  --token-ac705832-092f-475e-a252-93784ea8573d: #f4f0ea;
  --token-35e0c09c-bfbb-4fb7-9f38-c4d8879499d6: #efeae3;
  --token-9c2e8ee6-e444-42b8-997a-df33e3515cb5: #1c1917;
  --token-fcd1497e-17c5-4202-a04b-514ff865e522: #44403b;
  --token-e4e144c5-ea11-4eb0-8499-af7fcff7c35b: #6f675f;
  --token-f993f316-b2e9-4835-a988-e390a0f18113: #ffffff;
  --token-24c110d7-70a2-4d2f-9770-b2e54961bd48: #d9d2c8;
  --token-5f5af133-2080-4ffb-a775-1ed7714f667c: #efeae3;
  --token-4a066b0b-c929-4483-845f-f6c69bce15cb: #8b857d;
}