@layer tokens, base, components, sections, utilities;

@font-face {
  font-family: Geist;
  src: url("../font/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../font/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer tokens {
  :root {
    --font-sans:
      Geist, "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Liberation Sans", Arial, sans-serif;

    --font-serif:
      ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino,
      Georgia, "Times New Roman", serif;

    --font-mono:
      "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
      "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --fs-label:   0.6875rem;
    --fs-xs:      0.78125rem;
    --fs-sm:      0.875rem;
    --fs-base:    clamp(1rem,      0.965rem + 0.18vw,  1.0625rem);
    --fs-lg:      clamp(1.125rem,  1.05rem  + 0.36vw,  1.3125rem);
    --fs-xl:      clamp(1.25rem,   1.14rem  + 0.5vw,   1.5rem);
    --fs-2xl:     clamp(1.75rem,   1.42rem  + 1.55vw,  2.5rem);
    --fs-3xl:     clamp(2rem,      1.54rem  + 2.17vw,  3.125rem);
    --fs-4xl:     clamp(2.375rem,  1.46rem  + 4.29vw,  4.25rem);
    --fs-display: clamp(2.75rem,   0.83rem  + 8.25vw,  8rem);

    --track-display: -0.038em;
    --track-3xl:     -0.028em;
    --track-2xl:     -0.022em;
    --track-xl:      -0.016em;
    --track-body:    -0.004em;
    --track-label:    0.13em;
    --track-mono:     0.01em;

    --lh-display: 0.88;
    --lh-heading: 1.04;
    --lh-snug:    1.28;
    --lh-body:    1.62;
    --lh-prose:   1.72;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-bold:    700;

    --measure:        68ch;
    --measure-lead:   62ch;
    --measure-narrow: 54ch;

    --page-margin:      clamp(1.25rem, 5.5vw, 7rem);
    --container:        1440px;
    --container-narrow: 780px;
    --gutter:           clamp(1rem, 1.9vw, 1.75rem);
    --section-y:        clamp(3.5rem, 7.5vw, 8.5rem);

    --head-y:           clamp(2rem, 4vw, 4rem);
    --stack:            clamp(1rem, 2vw, 1.75rem);

    --s-1:  0.25rem;
    --s-2:  0.5rem;
    --s-3:  0.75rem;
    --s-4:  1rem;
    --s-5:  1.5rem;
    --s-6:  2rem;
    --s-7:  3rem;
    --s-8:  4rem;
    --s-9:  6rem;
    --s-10: 8rem;

    --r-0:    0;
    --r-1:    2px;
    --r-pill: 999px;

    --bw:        1px;
    --bw-strong: 2px;

    --shadow-overlay: 0 24px 64px -24px oklch(18% 0.02 265 / 0.28);

    --dur-fast: 150ms;
    --dur:      300ms;

    --dur-slow: 620ms;
    --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --ease-reel:   cubic-bezier(0.2, 0.35, 0.3, 1);

    --dur-entrance: 520ms;
    --stagger:      40ms;

    --dur-reel:     720ms;

    --lift:        2rem;
    --lift-line:   130%;
    --title-wipe:  100%;
    --label-drift: 1.6rem;
    --plate-drift: 20px;
    --wipe:        100%;
    --shake:       4px;

    --ridge-drift: 64px;

    --entrance:      bsd-rise;
    --entrance-line: bsd-line-rise;

    --z-base:    0;
    --z-raised:  10;
    --z-sticky:  100;
    --z-header:  200;
    --z-overlay: 300;
    --z-toast:   400;

    color-scheme: light;

    --paper:        oklch(98.6% 0.0045 85);
    --paper-sunk:   oklch(96.6% 0.006  85);
    --paper-raised: oklch(100%  0      0);

    --ink:          oklch(18%   0.009 265);
    --ink-2:        oklch(42%   0.008 265);

    --ink-3:        oklch(53%   0.007 265);

    --rule:         oklch(89%   0.005 265);
    --rule-strong:  oklch(76%   0.006 265);

    --accent:       oklch(48%   0.215 262);
    --accent-hover: oklch(41%   0.215 262);
    --accent-active:oklch(35%   0.215 262);
    --accent-tint:  oklch(95.5% 0.035 262);
    --accent-ink:   oklch(99%   0.005 262);

    --brand:        oklch(50%   0.19  29);

    --status-open:   oklch(52% 0.13 155);
    --status-warn:   oklch(52% 0.15 65);
    --status-closed: oklch(55% 0.17 29);

    --accent-wash:  color-mix(in oklab, var(--accent) 8%, transparent);
    --ink-wash:     color-mix(in oklab, var(--ink) 5%, transparent);
    --selection-bg: color-mix(in oklab, var(--accent) 20%, transparent);

    --logo-url: url("../img/logo-bsides-dehradun-ink.svg");
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;

      --paper:        oklch(15.5% 0.008 265);
      --paper-sunk:   oklch(12.5% 0.008 265);
      --paper-raised: oklch(19%   0.009 265);

      --ink:          oklch(96%   0.004  85);
      --ink-2:        oklch(78%   0.006 265);
      --ink-3:        oklch(63%   0.007 265);

      --rule:         oklch(28%   0.008 265);
      --rule-strong:  oklch(40%   0.009 265);

      --accent:       oklch(73%   0.155 262);
      --accent-hover: oklch(81%   0.135 262);
      --accent-active:oklch(88%   0.10  262);
      --accent-tint:  oklch(24%   0.055 262);
      --accent-ink:   oklch(14%   0.02  262);

      --brand:        oklch(66%   0.17  29);

      --status-open:   oklch(72% 0.15 155);
      --status-warn:   oklch(78% 0.14 70);
      --status-closed: oklch(70% 0.16 29);

      --shadow-overlay: 0 24px 64px -24px oklch(0% 0 0 / 0.6);

      --logo-url: url("../img/logo-bsides-dehradun-paper.svg");
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;

    --paper:        oklch(15.5% 0.008 265);
    --paper-sunk:   oklch(12.5% 0.008 265);
    --paper-raised: oklch(19%   0.009 265);

    --ink:          oklch(96%   0.004  85);
    --ink-2:        oklch(78%   0.006 265);
    --ink-3:        oklch(63%   0.007 265);

    --rule:         oklch(28%   0.008 265);
    --rule-strong:  oklch(40%   0.009 265);

    --accent:       oklch(73%   0.155 262);
    --accent-hover: oklch(81%   0.135 262);
    --accent-active:oklch(88%   0.10  262);
    --accent-tint:  oklch(24%   0.055 262);
    --accent-ink:   oklch(14%   0.02  262);

    --brand:        oklch(66%   0.17  29);

    --status-open:   oklch(72% 0.15 155);
    --status-warn:   oklch(78% 0.14 70);
    --status-closed: oklch(70% 0.16 29);

    --shadow-overlay: 0 24px 64px -24px oklch(0% 0 0 / 0.6);

    --logo-url: url("../img/logo-bsides-dehradun-paper.svg");
  }

  @media (prefers-contrast: more) {
    :root {
      --ink-2:       oklch(32% 0.008 265);
      --ink-3:       oklch(42% 0.007 265);
      --rule:        oklch(72% 0.006 265);
      --rule-strong: oklch(52% 0.007 265);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 1ms;
      --dur:      1ms;
      --dur-slow: 1ms;

      --dur-entrance: 1ms;
      --stagger:      0ms;

      --dur-reel:     1ms;

      --lift:        0px;
      --lift-line:   0%;
      --label-drift: 0px;
      --plate-drift: 0px;
      --ridge-drift: 0px;
      --wipe:        0%;

      --shake:       0px;

      --title-wipe:  0%;

      --entrance:      none;
      --entrance-line: none;
    }
  }
}