/* ==========================================================================
   STUDIO NAMU — DESIGN TOKENS
   Open this file first when you want to change a colour, a font or a size.

   How it works: every line below is a named value ("variable"), written as
       --name: value;
   The rest of the site refers to these names, so changing a value here
   changes it everywhere it is used. Change only the part after the colon,
   and keep the semicolon at the end of the line.

   Contents
     1. Fonts
     2. Colours — light mode
     3. Colours — dark mode   (written TWICE: keep both copies identical)
     4. Colours on top of the hero photo (same in light and dark)
     5. Font sizes
     6. Spacing, widths and corner rounding
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FONTS
   The line below downloads the three typefaces from Google Fonts. To use a
   different typeface: pick it on fonts.google.com, replace this address with
   the one Google gives you, then put its name in the matching --font-…
   variable underneath. (This @import line must stay at the very top.)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  /* Put only the typeface name here, inside the quotes. (The safety-net
     fonts used if a typeface fails to load are listed in the other CSS
     files, wherever you see var(--font-…) followed by more names.) */
  --font-display: 'Bricolage Grotesque'; /* headings, the "studio namu" wordmark, card titles, big step numbers */
  --font-body:    'Lora';                /* paragraphs and form fields */
  --font-mono:    'IBM Plex Mono';       /* small labels: menu, buttons, eyebrows, tags, captions */
}


/* --------------------------------------------------------------------------
   2. COLOURS — LIGHT MODE
   -------------------------------------------------------------------------- */
:root{
  --bg:          #FCFAF6; /* page background (warm off-white); also the sticky header and mobile "Book a Call" bar */
  --bg-alt:      #F1E7D8; /* second background (sand): the "New in Madrid" banner, photo placeholders, and the text on solid buttons */
  --surface:     #FFFFFF; /* cards, form fields and the pop-up window */
  --ink:         #2A211B; /* main text and headings */
  --ink-soft:    #6B5D51; /* secondary text: intro paragraphs, menu links, captions, form labels */
  --line:        #E2D4BE; /* thin divider lines and card / field borders */
  --accent:      #7C2420; /* primary brand colour (deep red): solid buttons, eyebrows, numbers, featured card outline */
  --accent-2:    #A8452F; /* the colour a solid button turns when you hover over it */
  --accent-tint: #F1DCD3; /* pale red wash: the "Namu comes from human" note, outline-button hover, video frame background */
  --blue:        #4C7A90; /* second brand colour (dusty blue): blue eyebrows, Madrid tags, blue-outlined cards, stars */
  --blue-2:      #3B6276; /* the colour a solid blue button turns when you hover over it */
  --blue-tint:   #E4EEF2; /* pale blue wash: "Prefer to talk first?" box, portrait frame background */
  --on-blue:     #FCFAF6; /* text sitting on a solid blue tag */
  --focus:       #1E5A52; /* outline shown around a link or field when using the keyboard */
  --band:        #E0EEF5; /* full-width pale blue band behind the "What We Do" section */

  --brand-name-color: var(--blue); /* colour of "studio namu" next to the logo (the darker dusty blue) */
  --overlay:     color-mix(in srgb, #000 55%, transparent); /* dark veil behind the pop-up window. 55% = how dark */
}


/* --------------------------------------------------------------------------
   3. COLOURS — DARK MODE
   The site switches to these automatically when the visitor's phone or
   computer is set to dark mode.

   IMPORTANT: the same list appears twice below (copy A and copy B). CSS
   needs both, so when you change a dark colour, change it in BOTH copies.
   -------------------------------------------------------------------------- */

/* Copy A — used when the visitor's device is in dark mode */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:          #201814; /* page background (dark brown) */
    --bg-alt:      #291F19; /* second background; text on solid buttons */
    --surface:     #2A211C; /* cards, form fields, pop-up window */
    --ink:         #F3E9DD; /* main text and headings */
    --ink-soft:    #C7B7A6; /* secondary text */
    --line:        #43352B; /* divider lines and borders */
    --accent:      #E08065; /* primary brand colour (terracotta in dark mode) */
    --accent-2:    #EFA184; /* solid-button hover */
    --accent-tint: #3A241E; /* dark red wash */
    --blue:        #8FC7DE; /* second brand colour (light blue in dark mode) */
    --blue-2:      #ABD6E8; /* solid blue button hover */
    --blue-tint:   #1D333A; /* dark blue wash */
    --on-blue:     #17252A; /* text on a solid blue tag */
    --focus:       #7FD1C4; /* keyboard focus outline */
    --band:        #1D333A; /* band behind "What We Do" */
  }
}

/* Copy B — used when dark mode is forced with <html data-theme="dark">
   (handy for previewing dark mode; see README). Keep identical to copy A. */
:root[data-theme="dark"]{
  --bg:          #201814;
  --bg-alt:      #291F19;
  --surface:     #2A211C;
  --ink:         #F3E9DD;
  --ink-soft:    #C7B7A6;
  --line:        #43352B;
  --accent:      #E08065;
  --accent-2:    #EFA184;
  --accent-tint: #3A241E;
  --blue:        #8FC7DE;
  --blue-2:      #ABD6E8;
  --blue-tint:   #1D333A;
  --on-blue:     #17252A;
  --focus:       #7FD1C4;
  --band:        #1D333A;
}


/* --------------------------------------------------------------------------
   4. COLOURS ON TOP OF THE HERO PHOTO
   These are deliberately the SAME in light and dark mode: they sit on the
   photograph, not on the page background, so they must stay light enough to
   read against the photo whatever the theme is.
   -------------------------------------------------------------------------- */
:root{
  --on-photo:           #FBF6EF; /* the outline button's text + border */
  --on-photo-soft:      #F1E6D8; /* hero eyebrow line and hero paragraph */
  --hero-wordmark:      #FCFAF6; /* the "studio namu" wordmark */
  --hero-highlight:     #BAD8E2; /* pale blue "highlighter" stroke behind the "studio namu" wordmark */
  --on-photo-glass:       rgba(251,246,239,0.1); /* faint frosted fill of the "See the work" button */
  --on-photo-glass-hover: rgba(251,246,239,0.2); /* the same fill when hovered */

  /* The dark gradient laid over the photo so the text is readable.
     The last number in each line is the strength: 0 = invisible, 1 = solid. */
  --hero-scrim-bottom: rgba(18,13,10,0.74); /* at the bottom edge, behind the text (darkest) */
  --hero-scrim-middle: rgba(18,13,10,0.4);  /* 40% of the way up */
  --hero-scrim-top:    rgba(18,13,10,0.02); /* two-thirds of the way up, where it fades out */
}


/* --------------------------------------------------------------------------
   5. FONT SIZES
   "px" is a fixed size. clamp(smallest, flexible, largest) is a size that
   grows with the screen: it never goes below the first number or above the
   last one. To make a heading bigger on phones, raise the first number; on
   large screens, raise the last.
   -------------------------------------------------------------------------- */
:root{
  /* Headings (display font) */
  --fs-hero-wordmark:       clamp(36px, 4.6vw, 54px); /* "studio namu" on the hero photo */
  --fs-mission-title:       clamp(26px,3.2vw,38px);   /* "Human-led design in an AI-shaped world." */
  --fs-section-title:       clamp(26px,3vw,36px);     /* main heading of each section (About, What We Do, Services, How It Works, Our Work, FAQ, Contact) */
  --fs-testimonials-title:  clamp(26px,3vw,34px);     /* "Client stories, coming soon" */
  --fs-banner-title:        clamp(24px,3vw,32px);     /* "New in Madrid?" banner heading */
  --fs-panel-title:         22px;   /* "First reviews on the way" */
  --fs-card-title:          20px;   /* the three service cards */
  --fs-track-title:         19px;   /* "Online Design" / "Furniture Sourcing" */
  --fs-capability-title:    18.5px; /* the six "What We Do" cards */
  --fs-box-title:           18px;   /* "Prefer to talk first?" and the pop-up title */
  --fs-faq-question:        16.5px; /* FAQ questions */
  --fs-work-title:          16px;   /* project names on portfolio cards */
  --fs-step-title:          15px;   /* step names in "How It Works" */
  --fs-step-number:         23px;   /* the big 1 / 2 / 3 in "How It Works" */

  /* Reading text (body font) */
  --fs-body:        17px;   /* base size of the page */
  --fs-lede:        16.5px; /* Mission paragraph, About paragraph */
  --fs-hero-lede:   16px;   /* paragraph on the hero photo */
  --fs-input:       15.5px; /* text typed into the contact form */
  --fs-text-md:     15px;   /* service-card text, FAQ answers */
  --fs-text-sm:     14.5px; /* "What We Do" card text, pop-up text, contact side-box links */
  --fs-text-xs:     14px;   /* step descriptions in "How It Works" */
  --fs-text-2xs:    13.5px; /* the delivery-day note, footer tagline */
  --fs-note:        13px;   /* small note under the contact form */

  /* Small labels (mono font) */
  --fs-brand-name:  22px;   /* "studio namu" next to the logo in the header */
  --fs-nav:         13px;   /* header menu links */
  --fs-button:      13px;   /* all buttons */
  --fs-eyebrow:       14.5px; /* small capital-letter line above each section heading */
  --fs-eyebrow-small: 12.5px; /* the smaller version: hero line, "Founder", and the list of project types in Our Work */
  --fs-brandnote:   15px;   /* "NAMU comes from human" note */
  --fs-label-md:    12.5px; /* prices on service cards, 01–06 numbers on "What We Do" cards */
  --fs-label-sm:    12px;   /* EN/ES button, "Madrid Only" tag, project country · year line, form labels, photo counter */
  --fs-label-xs:    11.5px; /* "via Calendly" line, footer copyright */
  --fs-label-2xs:   11px;   /* "Worldwide" / "Madrid" tags */
  --fs-label-3xs:   10.5px; /* "Photo coming soon" badges */

  /* Symbols */
  --fs-stars:         20px; /* the five stars in Testimonials */
  --fs-faq-icon:      19px; /* the + / – next to each FAQ question */
  --fs-gallery-arrow: 15px; /* the ← → buttons in the project pop-up */
  --fs-monogram:      64px; /* large initial shown only if the portrait photo is removed */
}


/* --------------------------------------------------------------------------
   6. SPACING, WIDTHS AND CORNER ROUNDING
   -------------------------------------------------------------------------- */
:root{
  --page-max-width: 1360px;                   /* the widest the content ever gets on big screens */
  --page-gutter:    clamp(18px, 5vw, 64px);   /* empty margin at the left and right edge of the page */
  --section-space:  clamp(52px, 9vw, 108px);  /* breathing room above and below each section */
  --grid-gap:       20px;                     /* gap between cards in the "What We Do" and Services grids */
  --card-padding:   26px 24px;                /* space inside a card (top/bottom, then left/right) */

  --radius-pill:  999px; /* fully rounded: buttons, tags, the EN/ES button */
  --radius-field: 7px;   /* contact form fields */
  --radius-sm:    8px;   /* the "Namu" note, booking links, pop-up photo */
  --radius-card:  10px;  /* cards */
  --radius-panel: 12px;  /* testimonials panel, "Prefer to talk first?" box, pop-up window */
  --radius-lg:    14px;  /* "New in Madrid" banner, "How It Works" panels */
  --radius-video: 16px;  /* Mission video frame */
  --radius-photo: 18px;  /* portrait photo frame */
}