/*
  ArtForm — Design tokens
  Extracted from the approved Claude Design file "ArtForm Homepage.dc.html".
  This is the single source of truth for color, type, layout and motion.
  Do not hardcode these values elsewhere — reference the custom properties.
*/

:root{

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

  /* Brand neutrals */
  --color-graphite:#202322;        /* primary dark: text on light, bg on dark sections */
  --color-graphite-deep:#1A1D1C;   /* footer / deepest bg */
  --color-warm-white:#F5F4F0;      /* primary light bg, text on dark sections */
  --color-concrete:#D8D8D3;        /* image placeholder / loading bg */
  --color-surface-alt:#EDEBE6;     /* alternate section background (warm white, slightly deeper) */

  /* Accent */
  --color-accent:#8A6A46;          /* restrained bronze accent — rules, hovers, mono numerals */

  /* Text on light backgrounds */
  --color-text:#202322;
  --color-text-label:#8B8B83;      /* eyebrow / section-number labels */
  --color-text-body-1:#5C5F5C;     /* standard body copy on light bg */
  --color-text-body-2:#3E413F;     /* slightly darker body copy (lede paragraphs) */
  --color-text-body-3:#6B6E6B;     /* feature / card descriptions */
  --color-text-muted:#6E6E66;      /* placeholder icon / faint content on concrete */

  /* Text & lines on dark backgrounds (graphite / footer) */
  --color-on-dark:#F5F4F0;
  --color-on-dark-90: rgba(245,244,240,.9);
  --color-on-dark-82: rgba(245,244,240,.82);
  --color-on-dark-80: rgba(245,244,240,.8);
  --color-on-dark-78: rgba(245,244,240,.78);
  --color-on-dark-72: rgba(245,244,240,.72);
  --color-on-dark-60: rgba(245,244,240,.6);
  --color-on-dark-55: rgba(245,244,240,.55);
  --color-on-dark-45: rgba(245,244,240,.45);
  --color-on-dark-border: rgba(245,244,240,.16);   /* hairline borders on dark bg */
  --color-on-dark-border-strong: rgba(245,244,240,.5);

  /* Hairlines / overlays on light backgrounds */
  --color-on-light-border: rgba(32,35,34,.14);
  --color-on-light-border-strong: rgba(32,35,34,.28);
  --color-on-light-motif: rgba(32,35,34,.22);      /* corner-bracket decorative motif */

  /* Scrim overlays (image gradients) */
  --scrim-hero:
    linear-gradient(to bottom, rgba(20,23,22,.5) 0%, rgba(20,23,22,.14) 18%, rgba(20,23,22,0) 30%),
    linear-gradient(to right, rgba(20,23,22,.62) 0%, rgba(20,23,22,.3) 42%, rgba(20,23,22,.04) 78%, rgba(20,23,22,0) 100%),
    linear-gradient(to top, rgba(20,23,22,.86) 0%, rgba(20,23,22,.6) 30%, rgba(20,23,22,.26) 60%, rgba(20,23,22,.08) 100%);
  --scrim-tile:
    linear-gradient(to top, rgba(24,27,26,.72) 0%, rgba(24,27,26,.12) 55%, rgba(24,27,26,0) 100%);
  --scrim-cta:
    linear-gradient(100deg, rgba(20,23,22,.72) 0%, rgba(20,23,22,.5) 34%, rgba(20,23,22,.2) 62%, rgba(20,23,22,.02) 100%);

  /* ---------- Typography ---------- */

  /* Headings: hero headline, section headings, large architectural statements. */
  --font-heading: 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
  /* Body / UI: copy, navigation, buttons, labels, metadata, footer. */
  --font-body: 'DM Sans', 'Helvetica Neue', Helvetica, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-hero:        clamp(38px, 5.4vw, 88px);    /* H1, hero only */
  --text-display:      clamp(30px, 4.2vw, 62px);    /* H2, large section headings */
  --text-heading:      clamp(28px, 3.8vw, 56px);    /* H2, standard section headings */
  --text-subheading:   clamp(19px, 1.6vw, 26px);    /* H3, feature / card titles */
  --text-body-lg:      clamp(16px, 1.25vw, 19px);   /* lede paragraphs */
  --text-body:         clamp(15px, 1.15vw, 18px);   /* standard paragraphs */
  --text-body-sm: 15.5px;                            /* card / feature descriptions */
  --text-label:        clamp(11px, 1vw, 11.5px);     /* eyebrow labels */
  --text-nav: 12.5px;                                 /* nav links */
  --text-button: 13px;                                /* buttons, CTAs */
  --text-metadata: 11px;                              /* metadata (dates, m², locations) */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-tight: -.035em;      /* large display headings */
  --tracking-normal: -.02em;      /* body headings */
  --tracking-label: .22em;        /* mono eyebrow labels */
  --tracking-nav: .11em;          /* nav links / buttons */
  --tracking-meta: .14em;         /* mono metadata */

  /* ---------- Layout ---------- */

  --content-max-width: 1460px;
  --page-padding-x: clamp(20px, 4vw, 56px);

  --nav-height: clamp(62px, 6.2vw, 86px);

  --section-padding-y: clamp(72px, 9vw, 150px);        /* standard section rhythm */
  --section-padding-y-lg: clamp(88px, 11vw, 190px);    /* emphasis section (philosophy) */
  --section-padding-y-sm: clamp(48px, 5.4vw, 88px);    /* compact band (credibility stats) */

  --gap-tile: clamp(10px, 1vw, 16px);      /* image tile grids */
  --gap-md: clamp(20px, 2.6vw, 48px);
  --gap-lg: clamp(32px, 4.5vw, 88px);

  /* Breakpoints (reference only — used in media queries, not usable as var() there) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-nav: 1040px;   /* nav switches from hamburger to full inline menu */
  --bp-lg: 1280px;

  /* ---------- Motion ---------- */

  --ease-standard: cubic-bezier(.16, .84, .44, 1);
  --duration-fast: 260ms;
  --duration-base: 320ms;
  --duration-reveal: 620ms;
  --duration-media: 700ms;

  --reveal-offset: 20px;
}