/* Anything Studios — Design Tokens v.02
 * CSS custom properties. Drop into any project and reference via var(--token-name).
 * For Tailwind, see tailwind-preset.js (sibling file).
 */

:root {
  /* — Brand color — */
  --as-ink:            #0E0E0E;
  --as-paper:          #F2EFE8;
  --as-persimmon:      #FF4F2C;
  --as-wildcard:       #D7FF3A;
  --as-quiet:          #6F6F6F;

  /* — Scale (tints / shades) — */
  --as-ink-90:         #2A2A2A;
  --as-ink-70:         #4A4A4A;
  --as-paper-warm:     #E8E4D9;
  --as-paper-deep:     #D6D2C5;
  --as-persimmon-deep: #D63E1F;
  --as-persimmon-tint: #FFE4DC;
  --as-persimmon-dark: #8A2D17;
  --as-wildcard-deep:  #B8E000;
  --as-wildcard-tint:  #EFFFB8;
  --as-wildcard-dark:  #7A8A1F;

  /* — Functional — */
  --as-success: #2A7A2A;
  --as-error:   #B83838;
  --as-warning: #E6A21F;
  --as-info:    #1F5A7A;

  /* — Lines / borders — */
  --as-line:             rgba(14,14,14,0.12);
  --as-line-strong:      rgba(14,14,14,0.24);
  --as-line-dark:        rgba(242,239,232,0.14);
  --as-line-dark-strong: rgba(242,239,232,0.28);

  /* — Type — */
  --as-font-display: "Space Grotesk", system-ui, sans-serif;
  --as-font-body:    "Inter", system-ui, sans-serif;
  --as-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --as-weight-regular: 400;
  --as-weight-medium:  500;
  --as-weight-semi:    600;
  --as-weight-bold:    700;

  --as-size-display-xl: 96px;
  --as-size-display-lg: 64px;
  --as-size-display:    48px;
  --as-size-h1:         36px;
  --as-size-h2:         24px;
  --as-size-body-lg:    19px;
  --as-size-body:       15px;
  --as-size-caption:    11px;

  --as-lh-display-xl: 0.9;
  --as-lh-display-lg: 0.95;
  --as-lh-display:    1.0;
  --as-lh-h1:         1.05;
  --as-lh-h2:         1.15;
  --as-lh-body-lg:    1.55;
  --as-lh-body:       1.55;
  --as-lh-caption:    1.5;

  --as-tracking-display: -0.03em;
  --as-tracking-h1:      -0.025em;
  --as-tracking-h2:      -0.02em;
  --as-tracking-body:    0;
  --as-tracking-caption: 0.1em;

  /* — Spacing (baseline 4) — */
  --as-s-1:  4px;
  --as-s-2:  8px;
  --as-s-3:  12px;
  --as-s-4:  16px;
  --as-s-5:  24px;
  --as-s-6:  32px;
  --as-s-7:  48px;
  --as-s-8:  64px;
  --as-s-9:  96px;
  --as-s-10: 128px;

  /* — Radius — */
  --as-radius-sm:   2px;
  --as-radius-md:   4px;
  --as-radius-lg:   8px;
  --as-radius-pill: 999px;

  /* — Motion — */
  --as-motion-fast:    120ms;
  --as-motion-base:    240ms;
  --as-motion-slow:    480ms;
  --as-ease-default:   cubic-bezier(0.2, 0.7, 0.2, 1);

  /* — Layout — */
  --as-container-max:  1240px;
  --as-gutter:         16px;
  --as-margin-desktop: 40px;
  --as-margin-mobile:  24px;
}

/* Dark mode lift — toggle via [data-theme="dark"] on the root */
[data-theme="dark"] {
  --as-ink:       #F2EFE8;
  --as-paper:     #0E0E0E;
  --as-persimmon: #FF6B4A;
  --as-quiet:     #8A8A8A;
  --as-line:      rgba(242,239,232,0.14);
  --as-line-strong: rgba(242,239,232,0.28);
}