/* ==========================================================================
   Design tokens — generated from the Figma file "Final Portfolio 2026"
   Text styles:  desktop-headline, body-desktop, button-desktop, footer-desktop,
                 mobile-headline,  body-mobile,  button-mobile,  footer-mobile
   Desktop values are the defaults; the mobile set is swapped in below 76.8rem.
   ========================================================================== */

/* ---- Font ------------------------------------------------------------------
   sf-pro-text, Regular (fallback). Uses SF Pro Text when it's installed on the device;
   no font files are hosted (Apple's license doesn't allow serving SF Pro). */
@font-face {
  font-family: "sf-pro-text";
  src: local("SF Pro Text"), local("SFProText-Regular"), local("SF Pro Text Regular");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Global scale -------------------------------------------------------
   All sizes are in rem, where 1rem = 10px at 100%. The root size scales the
   whole layout: everything from 768px up uses the laptop size, 67% (the look
   of a 67% browser zoom), easing back up to 100% on very wide screens
   (2580px+). Below 768px the Figma mobile layout and sizes take over. */
html { font-size: 10px; }
@media (min-width: 768px) { html { font-size: clamp(6.7px, 100vw / 258, 10px); } }

:root {
  /* ---- Color ---------------------------------------------------------- */
  --color-text-primary: #3d3d3d;       /* headings, labels */
  --color-text-secondary: #858585;     /* body copy, button labels */
  --color-text-tertiary: #898989;      /* footer */
  --color-footer-underline: #d4d4d4;   /* Ogilvy link underline */
  --color-surface: #ffffff;
  --color-surface-glass: rgb(255 255 255 / 0.75);   /* carousel + dashboard button (closed) */
  --color-surface-scrim: rgb(255 255 255 / 0.5);
  --color-switch-home: rgb(255 255 255 / 0.4);   /* dark-mode toggle track on the home video */
  --color-switch-home-hover: rgb(255 255 255 / 0.55);
  --color-switch-hover: rgb(0 0 0 / 0.085);        /* project pages */
  --color-switch-knob: #ffffff;                     /* toggle circle (light mode) */    /* dashboard open backdrop (blur does most of the work) */
  --color-tile: #f0f0f0;
  --color-tile-hover: #e0e0e0;
  --color-placeholder: #dedede;
  --color-divider: #ebebeb;            /* thin rule on project pages */
  --color-button: rgb(0 0 0 / 0.06);
  --color-button-hover: rgb(0 0 0 / 0.12);
  --color-button-selected: rgb(0 0 0 / 0.12);
  --color-button-selected-hover: rgb(0 0 0 / 0.16);
  --color-dot: #878787;
  --color-clock-face: #4a4a4a;   /* soft black */
  --color-clock-second: #c4c4c4;   /* light grey */
  --color-focus: #3d3d3d;
  --color-home-fallback: #cfcac2;

  /* ---- Typography ------------------------------------------------------
     Same relationships on desktop and phones: buttons, tiles, carousel and
     dashboard text share one size, 1pt below body copy; the footer is 3pt
     below body; the headline is about 2.4x body. */
  /* Apple's system font first: it IS SF Pro Text on Mac/iPhone/iPad, and it's
     variable, so in-between weights like 450 render exactly. Then sf-pro-text
     (see @font-face above), then Segoe UI / Roboto elsewhere. */
  --font-family: -apple-system, BlinkMacSystemFont, "sf-pro-text", system-ui,
                 "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-weight: 450;             /* between Regular (400) and Medium (500) */

  --type-headline-size: 3.4rem;  --type-headline-lh: 1.1;   --type-headline-ls: -0.035em;
  --type-body-size: 1.7rem;      --type-body-lh: 1.2;      --type-body-ls: -0.025em;
  --type-button-size: 1.56rem;   --type-button-lh: 1.2;     --type-button-ls: -0.025em;
  --type-tile-size: 1.56rem;     --type-tile-lh: 1.2;      --type-tile-ls: -0.025em;
  --type-footer-size: 1.5rem;    --type-footer-lh: 1.2;     --type-footer-ls: -0.025em;

  /* ---- Spacing --------------------------------------------------------- */
  --space-page: 0.7rem;           /* project page outer padding + panel gutters */
  --space-edge: 2rem;          /* home edge inset, footer side padding */
  --space-stack: 0.7rem;          /* gap between cards / images */
  --dash-gap: 0.44rem;            /* gaps between the dashboard sections, carousel and ⋮ (desktop) */
  --space-section: 2.4rem;
  --space-project: 1.1rem;      /* project pages: the one gap between all elements (edges, columns, images, buttons, tiles) */

  /* ---- Radius ---------------------------------------------------------- */
  /* resting corners all match the project carousel (0.5rem); hover states below keep their larger radii */
  --radius-card: 0.5rem;
  --radius-media: 0.5rem;
  --radius-thumb: 0.5rem;
  --radius-button: 0.3rem;   /* subtler rounding on buttons */
  --radius-tile: 0.5rem;
  --radius-tile-hover: 0.5rem;          /* no corner change on hover — colour only */
  --radius-thumb-tile: 0.5rem;
  --radius-thumb-tile-hover: 0.5rem;
  --radius-carousel-hover: 0.5rem;
  --radius-carousel-thumb-hover: 0.5rem;
  --radius-dash-button-hover: 0.5rem;

  /* ---- Effects ----------------------------------------------------------
     Figma "background blur" radius ≈ 2× CSS blur(), hence 25 → 12.5px. */
  --blur-glass: 1.25rem;
  --blur-scrim: 5.9rem;

  /* ---- Component metrics ---------------------------------------------- */
  --footer-height: 3.9rem;
  --carousel-width: 58.5rem;
  --carousel-height: 18.5rem;
  --carousel-pad: 0.9rem 2.2rem 0.9rem 0.9rem;
  --carousel-gap: 1.5rem;
  --carousel-thumb-width: 25.2rem;
  --carousel-text-gap: 1rem;
  --carousel-text-pb: 1.5rem;
  --dash-button-width: 3.1rem;
  --dash-dot: 0.3rem;
  --dash-dot-gap: 0.3rem;          /* collapsed: 0.6rem pitch */
  --dash-dot-gap-open: 0.6rem;     /* expanded: 0.9rem pitch */
  --dashboard-width: 62.3rem;
  --card-pad: 1.5rem 3.5rem 2rem 1.5rem;
  --card-gap: 1rem;
  --list-gap: 0.4rem;
  --clients-width: 13.5rem;   /* narrow enough to give Awards one line per entry */
  --clock-size: 8.8rem;
  --button-pad: 0.5rem 1.4rem;       /* shorter buttons */
  --tile-height: 15rem;
  --tile-thumb: 12rem;
  --tile-pad: 0.6rem 1.2rem 0.6rem 0.6rem;
  --tile-gap: 1.2rem;
  --sidebar-width: 44.2rem;

  /* ---- Motion (ease-out-quart, the curve used on akercompanies.com) ---- */
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-switch: cubic-bezier(0.34, 1.35, 0.64, 1);   /* toggle knob: glides, slight settle */
  --dur-fast: 200ms;
  --dur-base: 450ms;
  --dur-slow: 900ms;
  --dur-hover: 600ms;          /* button / tile hover fades */
  --dur-page: 1100ms;          /* page-to-page crossfade */
  --dur-list-bg: 380ms;        /* project list white backdrop fade */
  --dur-reveal: 650ms;         /* dashboard / project list slide-up */
  --carousel-interval: 5000; /* ms — read by JS */
}

/* ---- Mobile set (Figma frames are 402px wide) --------------------------- */
@media (max-width: 767px) {
  :root {
    --color-surface-glass: rgb(255 255 255 / 0.84);
    --color-surface-scrim: rgb(255 255 255 / 0.7);   /* stronger veil behind the open dashboard on phones */

    --type-headline-size: 2.4rem;  --type-headline-lh: 1.1;
    --type-body-size: 1.2rem;      --type-body-lh: 1.2;
    --type-button-size: 1.1rem;    --type-button-ls: -0.025em;
    --type-tile-size: 1.1rem;      --type-tile-lh: 1.2;   /* exactly the button text */
    --type-footer-size: 0.9rem;

    --space-edge: 1.2rem;
    --space-stack: 0.5rem;
    --dash-gap: 0.25rem;            /* dashboard gaps + buttons inside the cards (phones) */
    --space-project: 0.7rem;

    /* phones: every rounded corner matches the project carousel (3px) */
    --radius-card: 0.3rem;
    --radius-media: 0.3rem;
    --radius-thumb: 0.3rem;
    --radius-button: 0.3rem;
    --radius-tile: 0.3rem;
    --radius-tile-hover: 0.3rem;
    --radius-thumb-tile: 0.3rem;
    --radius-thumb-tile-hover: 0.3rem;
    --radius-carousel-hover: 0.3rem;
    --radius-carousel-thumb-hover: 0.3rem;
    --radius-dash-button-hover: 0.3rem;

    --footer-height: 2rem;
    --carousel-width: auto;
    --carousel-height: 9.6rem;
    --carousel-pad: 0.6rem 2rem 0.6rem 0.6rem;   /* more room on the right of the text */
    --carousel-gap: 0.85rem;  /* image → text */
    --carousel-thumb-width: var(--tile-thumb);   /* same size as the project list tile image */
    --carousel-text-gap: 0.7rem;
    --carousel-text-pb: 0.5rem;   /* text sits a little lower on phones */
    --dash-button-width: 2.7rem;
    --dash-dot: 0.22rem;
    --dash-dot-gap: 0.22rem;
    --dash-dot-gap-open: 0.5rem;
    --dashboard-width: 100%;
    --card-pad: 1.3rem 1.3rem 1.3rem 1.1rem;
    --card-gap: 0.5rem;
    --list-gap: 0.3rem;
    --clock-size: 3.2rem;
    --button-pad: 0.6rem 0.9rem;   /* every mobile button matches the project-page nav buttons */
    --tile-height: 9.6rem;
    --tile-pad: 0.6rem 2rem 0.6rem 0.6rem;   /* more room on the right, same as the carousel */
    --tile-thumb: 11.6rem;
    --tile-gap: 0.85rem;      /* image → text */
  }
}

/* ---- Dark theme (toggle, top right) ---------------------------------------
   Declared after the mobile set so it wins at every size.
   Background is near-black (#101010); greys (other than text) are kept fairly light so
   tiles, lines, buttons and icons read clearly against it. */
[data-theme="dark"] {
  color-scheme: dark;
  --color-text-primary: #ededed;
  --color-text-secondary: #747474;   /* dark mode body text */
  --color-text-tertiary: #6f6f6f;
  --color-footer-underline: #444444;
  --color-surface: #101010;              /* near-black, just under the original #141414 */
  --color-surface-glass: rgb(16 16 16 / 0.75);
  --color-surface-scrim: rgb(12 12 12 / 0.62);   /* darker overlay behind the open dashboard */
  --color-switch-home: rgb(16 16 16 / 0.4);
  --color-switch-home-hover: rgb(16 16 16 / 0.55);
  --color-switch-hover: rgb(255 255 255 / 0.16);
  --color-switch-knob: #b3b3b3;                     /* toggle circle (dark mode): grey */
  --color-tile: #1c1c1c;
  --color-tile-hover: #2e2e2e;
  --color-placeholder: #202020;
  --color-divider: #222222;   /* dark mode: subtle line on project pages */
  --color-button: rgb(255 255 255 / 0.07);
  --color-button-hover: rgb(255 255 255 / 0.12);
  --color-button-selected: rgb(255 255 255 / 0.12);
  --color-button-selected-hover: rgb(255 255 255 / 0.16);
  --color-dot: #b3b3b3;
  --color-clock-face: #b3b3b3;   /* grey, not white */
  --color-clock-second: #707070;
  --color-focus: #ededed;
  --color-home-fallback: #262420;
}
@media (max-width: 767px) {
  [data-theme="dark"] { --color-surface-glass: rgb(16 16 16 / 0.84); }
}

/* large, wide displays only: all text 2pt smaller, tighter margins,
   carousel title/blurb spacing matches the project list */
@media (min-width: 1920px) {
  :root {
    --type-headline-size: calc(3.4rem - 2pt);
    --type-body-size: calc(1.7rem - 2pt);
    --type-button-size: calc(1.56rem - 2pt);
    --type-tile-size: calc(1.56rem - 2pt);
    --type-footer-size: calc(1.5rem - 2pt);
    --space-edge: 1.3rem;
    --space-project: 0.8rem;
    --carousel-text-gap: 0.5rem;   /* same as .tile__text */
    --button-pad: 0.35rem 1.4rem;  /* shorter buttons */
    --tile-height: 12.5rem;        /* shorter project-list tiles… */
    --tile-thumb: 10rem;           /* …with the image scaled to keep its shape */
    --clock-size: calc(6.72rem - 9.48px);   /* smaller clock: Contact buttons line up with Selected projects */
  }
}