/* ==========================================================================
   Amesite design tokens
   Source: Amesite Brand & Style Guide v3 (21.01.14.BrandStyleGuide.v3.pptx)
   Docs:   ./AI-BRAND-RULES.md  ·  ./BRAND-GUIDELINES.md

   Values marked [guide] are stated in the style guide.
   Values marked [web]   are web translations added for HTML/CSS use.

   Usage:
     <link rel="stylesheet" href="../assets/amesite-brand/design-tokens.css">
   ========================================================================== */

:root {

  /* --- Primary color set ------------------------------------------ [guide]
     Dark to light. --am-purple-600 is THE brand color. */
  --am-purple-900: #67005A;   /* deep shade: hover/pressed, dark headers */
  --am-purple-600: #990088;   /* BRAND PURPLE: headings, buttons, links, logo */
  --am-purple-400: #CD39B8;   /* tint: secondary emphasis, large text, borders */
  --am-pink-300:   #FF70EB;   /* bright accent: the 10%, badges on dark */

  /* --- Secondary color set A: violet ----------------------------- [guide] */
  --am-violet-900: #430099;
  --am-violet-600: #7A11CB;
  --am-violet-400: #AF4DFF;
  --am-violet-300: #E57FFF;

  /* --- Secondary color set B: orange / red ---------------------- [guide]
     Sparing accent only. --am-orange-600 also appears in the secondary mark. */
  --am-orange-800: #C41400;
  --am-orange-600: #FF5314;
  --am-orange-400: #FF8746;

  /* --- Neutral color set ---------------------------------------- [guide]
     These carry the 60% of the 60-30-10 split. */
  --am-ink:        #11000F;   /* body text, darkest neutral (never #000) */
  --am-gray-500:   #A08B9C;   /* muted labels, kickers */
  --am-gray-200:   #E7E1E6;   /* borders, dividers */
  --am-gray-050:   #F9F6F8;   /* page / section wash */
  --am-white:      #FFFFFF;

  /* --- Semantic aliases ------------------------------------------- [web] */
  --am-text:            var(--am-ink);
  --am-text-muted:      #6B5866;          /* [web] darkened gray-500, 6.5:1 on white;
                                             use instead of --am-gray-500 for body text */
  --am-text-on-dark:    var(--am-white);
  --am-surface:         var(--am-white);
  --am-surface-sunken:  var(--am-gray-050);
  --am-border:          var(--am-gray-200);
  --am-link:            var(--am-purple-600);
  --am-link-hover:      var(--am-purple-900);
  --am-focus:           var(--am-purple-600);

  /* --- Approved gradients --------------------------------------- [guide]
     Only these two pairs. Do not invent new stop colors. */
  --am-gradient-1: linear-gradient(90deg, #7A11CB 0%, #990088 100%);
  --am-gradient-2: linear-gradient(90deg, #11000F 0%, #7A11CB 100%);
  /* Overlay forms for laying a gradient over a photo [guide: "over an image
     with transparency"] */
  --am-gradient-1-overlay: linear-gradient(90deg, rgba(122,17,203,.75) 0%, rgba(153,0,136,.75) 100%);
  --am-gradient-2-overlay: linear-gradient(90deg, rgba(17,0,15,.80) 0%, rgba(122,17,203,.65) 100%);

  /* --- Platform / product UI palette ----------------------------- [guide]
     A SEPARATE cooler ramp for in-app screens (guide slide 19).
     Do not mix with the warm brand neutrals above on the same screen. */
  --am-ui-white:        #FFFFFF;
  --am-ui-gray-050:     #F7F7F7;   /* app canvas background */
  --am-ui-gray-200:     #E6E6E6;
  --am-ui-gray-400:     #999999;   /* graphic use only, fails text contrast */
  --am-ui-gray-600:     #666666;   /* secondary text */
  --am-ui-gray-800:     #444444;   /* primary text */
  --am-ui-bg:           var(--am-ui-gray-050);
  --am-ui-surface:      var(--am-ui-white);
  --am-ui-text:         var(--am-ui-gray-800);
  --am-ui-text-muted:   var(--am-ui-gray-600);
  --am-ui-success:      #73A046;
  --am-ui-error:        #D44040;
  --am-ui-warning:      #FDC964;

  /* --- Typography ------------------------------------------------ [guide]
     Montserrat primary; Helvetica Neue is the sanctioned fallback. */
  --am-font-sans: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --am-weight-regular: 400;   /* [guide] */
  --am-weight-semibold: 600;  /* [web]   */
  --am-weight-bold: 700;      /* [guide] */

  /* Scale [web], translated from the guide's document sizes */
  --am-text-hero:    clamp(2.5rem, 6vw, 4.375rem); /* 70 pt cover title */
  --am-text-title:   1.75rem;    /* 22 pt slide title */
  --am-text-sub:     1.125rem;   /* 18-20 pt subheading / section eyebrow */
  --am-text-heading: 1.25rem;    /* 16 pt bold section heading */
  --am-text-body:    1rem;       /* 14-16 pt body */
  --am-text-small:   0.8125rem;  /* 10 pt tips, small print */
  --am-text-label:   0.75rem;    /* 10 pt uppercase kicker, 12 pt footer */

  /* Line height [guide]: 1.2x - 1.4x */
  --am-leading-tight: 1.2;
  --am-leading-body:  1.35;
  --am-leading-loose: 1.4;

  /* Space after a heading [guide]: 6-8 pt, not a full return */
  --am-space-after-heading: 0.5rem;
  --am-letterspacing-kicker: 0.08em;  /* [web] */

  /* --- Shape and elevation ---------------------------------------- [web]
     Not specified in the guide; chosen to match Montserrat's "friendly
     roundness" and the guide's "Just Enough" principle. */
  --am-radius-sm: 6px;
  --am-radius-md: 12px;
  --am-radius-pill: 999px;
  --am-shadow-sm: 0 1px 2px rgba(17, 0, 15, .06);
  --am-shadow-md: 0 4px 16px rgba(17, 0, 15, .08);
}

/* Optional base layer — opt in by adding class="am" to <body>. */
.am {
  margin: 0;
  font-family: var(--am-font-sans);
  font-size: var(--am-text-body);
  font-weight: var(--am-weight-regular);
  line-height: var(--am-leading-body);
  color: var(--am-text);
  background: var(--am-surface-sunken);
  text-align: left;                 /* [guide] left-align copy, always */
  -webkit-font-smoothing: antialiased;
}

.am h1, .am h2, .am h3, .am h4 {
  line-height: var(--am-leading-tight);
  margin: 0 0 var(--am-space-after-heading);
}
.am h1 { font-size: var(--am-text-title);   font-weight: var(--am-weight-regular); }
.am h2 { font-size: var(--am-text-heading); font-weight: var(--am-weight-bold); }
.am h3 { font-size: var(--am-text-sub);     font-weight: var(--am-weight-semibold); }
.am p  { margin: 0 0 1rem; max-width: 68ch; }
.am a  { color: var(--am-link); }
.am a:hover { color: var(--am-link-hover); }
.am small { font-size: var(--am-text-small); }

.am :focus-visible {
  outline: 2px solid var(--am-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .am *, .am *::before, .am *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}