/*
 * Tailwind's design tokens, as SCSS.
 *
 * The framework itself is not loaded, deliberately. Tailwind ships Preflight, a
 * global reset that strips `button`, `input`, `select`, `a`, `h1`-`h6` and the
 * list elements back to unstyled - and this stylesheet is loaded into wp-admin,
 * where those same elements are the admin's own chrome. Preflight inside
 * wp-admin is not a style choice, it is a broken sidebar and unreadable notices
 * on every screen the plugin registers. The play CDN also fails the plugin's
 * own CSP and adds a 3MB runtime for what is, in the end, a palette.
 *
 * So: the scale, not the framework. These are Tailwind's real values, and the
 * look everyone recognises comes from using them consistently - slate for every
 * neutral, a ring instead of a border, shadow-sm on cards, and the 4px spacing
 * grid underneath all of it.
 */

/* ---------------------------------------------------------------- colour -- */

/* Slate. Tailwind's neutral, faintly blue, which is why it looks cooler and
   more modern than the true greys this plugin used. */
$slate-50:  #F8FAFC;
$slate-100: #F1F5F9;
$slate-200: #E2E8F0;
$slate-300: #CBD5E1;
$slate-400: #94A3B8;
$slate-500: #64748B; /* 4.76:1 on white - the lightest that passes for text. */
$slate-600: #475569; /* 7.46:1 on white. */
$slate-700: #334155;
$slate-800: #1E293B;
$slate-900: #0F172A; /* 17.85:1 on white. */

/*
 * MeetingHub's own blue, not Tailwind's.
 *
 * The brand is #085DF2 - registered as `brand` in tailwind.config.js, and what
 * the plugin has always used. An earlier pass here swapped it for Tailwind's
 * blue-600 (#2563EB) on the grounds that it was 'close enough', which is how a
 * product quietly loses its own colour. The ramp is built around the brand
 * instead, so every accent on every screen is the same blue.
 */
$blue-50:  #EEF4FE; /* Brand at ~6% - the tint behind soft buttons. */
$blue-100: #D8E6FD;
$blue-200: #B9D0F9;
$blue-500: #085DF2; /* The brand itself, used for focus rings. */
$blue-600: #085DF2; /* 5.44:1 against white, which is one number in both
                        directions - WCAG contrast is symmetric. */
$blue-700: #0A52D0; /* brand-hover from tailwind.config.js. */
$blue-800: #08409E;

/* The Pro band's ink and accent, reused so one identity runs end to end. */
$brand-ink:  #0A1B33;
$brand-ink2: #06101F;
$brand-gold: #F0C25A;

/*
 * The plugin's texture: a 135-degree rule at ~2% white, from the Pro band.
 * Soft gradients read as decoration; a ruled pattern reads as a material, and
 * it is the one piece of surface treatment this product already owns.
 */
@mixin mhub-ruled($alpha: 0.022) {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, $alpha) 0 1px,
        rgba(255, 255, 255, 0) 1px 7px
    );
}

$emerald-50:  #ECFDF5;
$emerald-600: #059669;
$emerald-700: #047857; /* 5.44:1 on white. */

$amber-50:  #FFFBEB;
$amber-100: #FEF3C7;
$amber-300: #FCD34D; /* The rule down the side of a watch-out block. */
$amber-700: #B45309;
$amber-800: #92400E; /* 6.94:1 on amber-100. */
$amber-900: #78350F; /* 11.6:1 on amber-50. */

/* ------------------------------------------------------------------ ring -- */

/*
 * `ring-1 ring-slate-900/5` is the single most recognisable thing about a
 * Tailwind surface: a hairline that is the page's own ink at 5% rather than a
 * grey borrowed from nowhere, so it reads as an edge rather than as a line.
 */
$ring: rgba(15, 23, 42, 0.06);
$ring-strong: rgba(15, 23, 42, 0.12);

/*
 * The edge of a control, which has to be seen rather than sensed.
 *
 * A text field on a white card is white on white: the ring is the only thing
 * that says a control is there, so WCAG 1.4.11 asks it for 3:1 against the
 * ground. $ring-strong measures 1.28:1 - it was never a contrast value, it was
 * a hairline, and it is still the right answer for the edge of a card, where
 * the surface and its shadow do the identifying.
 *
 * #8492a6 measures 3.16:1 on white and 3.02:1 on the slate-50 a row takes on
 * hover. It is not a new colour: all-meetings.css already uses this exact grey
 * as its control hover, so the palette gained nothing, only a second job.
 */
$ring-control: #8492a6;

/* --------------------------------------------------------------- radius -- */

$rounded-md: 6px;
$rounded-lg: 8px;
$rounded-xl: 12px;
$rounded-2xl: 16px;
$rounded-3xl: 24px;
$rounded-full: 9999px;

/* --------------------------------------------------------------- shadow -- */

/* Tailwind's real shadow stack: two layers, both very soft. The heavy single
   drop shadow is what makes a card look like it came from 2014. */
$shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
$shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05), 0 1px 3px 0 rgba(15, 23, 42, 0.06);
$shadow-md: 0 2px 4px -2px rgba(15, 23, 42, 0.06), 0 4px 8px -2px rgba(15, 23, 42, 0.08);
$shadow-lg: 0 4px 6px -4px rgba(15, 23, 42, 0.08), 0 10px 20px -5px rgba(15, 23, 42, 0.12);
/*
 * DriveHub's surface vocabulary, with this plugin's ink.
 *
 * Its surfaces.js exists because cards were being written from scratch
 * wherever one was needed and no two agreed - which is what decides whether an
 * admin reads as one product or several. The same values, with slate in place
 * of DriveHub's green-cast ink, so the two plugins share a skeleton without
 * MeetingHub borrowing another brand's colour.
 *
 * The first layer is an inset hairline rather than a border: a soft shadow
 * alone goes mushy at the edge against a pale ground, and a real border adds a
 * second, harder edge on top of the ramp.
 */
$panel-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);

/* Panels are 14, controls 10 - DriveHub's RADIUS, and now this plugin's. */
$radius-panel: 14px;
$radius-control: 10px;

/*
 * How much air a card keeps between its own edge and the first and last thing
 * printed inside it.
 *
 * Named because four cards had drifted to four different answers - measured at
 * the ink rather than at the padding declaration, the four Zoom tabs came out
 * at 16, 22, 12 and 11 at the bottom. Nobody chose that; each card was padded
 * on its own and the gaps were never compared side by side, which is exactly
 * the kind of thing that reads as unfinished without ever being nameable.
 *
 * Slightly more below than above on purpose: a block of content sitting on an
 * edge needs a little more beneath it than over it to look centred.
 *
 * These are ink-to-edge targets, not padding values. Where a card's last child
 * carries padding of its own, subtract it - the comment at the use site says
 * what was subtracted and why.
 */
$card-ink-top: 18px;
$card-ink-bottom: 22px;

/*
 * How wide a settings column is allowed to get.
 *
 * Unconstrained, these rows ran the full 1420px page, which put a toggle some
 * 1300px from the label it belongs to: two separate columns of unrelated things
 * rather than one row you read across. A measure keeps the control beside its
 * label at any window size.
 */
$settings-measure: 960px;

/* The brand blue, so a primary button glows in the plugin's own colour. */
$shadow-blue: 0 1px 2px 0 rgba(8, 93, 242, 0.22), 0 4px 10px -3px rgba(8, 93, 242, 0.38);

/* ----------------------------------------------------------------- type -- */

/*
 * Tailwind's own font stack, which puts the system UI face first. The plugin
 * was asking for -apple-system on Windows, where it does not exist, and landing
 * on Segoe UI by accident rather than on purpose.
 */
$font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

/* text-xs through text-xl, with Tailwind's paired line heights. */
$text-xs: 12px;
$text-xs-lh: 16px;
$text-sm: 14px;
$text-sm-lh: 20px;
$text-base: 16px;
$text-base-lh: 24px;
$text-lg: 18px;
$text-lg-lh: 28px;
$text-xl: 20px;
$text-xl-lh: 28px;
$text-2xl: 24px;
$text-2xl-lh: 32px;

/* --------------------------------------------------------------- easing -- */

/* 150ms is Tailwind's `duration-150`, and the Doherty threshold says anything
   past ~260ms starts reading as the interface being slow rather than smooth. */
$ease: cubic-bezier(0.4, 0, 0.2, 1);
$dur: 150ms;

/*
 * The focus ring, once, so every control in the plugin wears the same one.
 * `ring-2 ring-blue-500 ring-offset-2` - the offset is what keeps it legible on
 * a filled button, where a flush ring disappears into the fill.
 */
@mixin tw-ring-focus($color: $blue-500) {
    outline: 2px solid $color;
    outline-offset: 2px;
}